[CSS] Scale on Hover with Transition

效果

 

源码

<!doctype html><html class="outline color"><head><meta charset="utf-8"><title>图片scale动画</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色图片缩放动画 */.img-box>.image-scale {position: absolute;width: 900px;height: 580px;top: -80px;left: -80px;background-size: cover;transition: all 0.5s ease-in-out;}.img-box:hover>.image-scale {transform: scale(0.822);}</style></head><body><div class="img-box"><div class="image-scale" style="background-image: url(./images/1.jpg);"></div></div></body></html>

img-box: 装图片的盒子,确保子元素超出部分隐藏起来.

image-scale: 绝对定位,并手动设置图片居中.

 

素材

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

热敏电阻温度特性曲线_热敏电阻与体温计的应用关系

相信体温计大家都熟悉&#xff0c;热敏电阻与体温计的应用关系大家都知道吗&#xff1f;热敏电阻热敏电阻探头测量体温的原理又是什么呢&#xff0c;小编跟大家分析一下&#xff0c;希望以下详细的介绍能帮助到大家&#xff01;热敏电阻探头测量体温的原理分析如下&#xff1a;…

js总结

var a {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);就是字典&#xff0c;for (var i in a ){     console.log(a[i])}var anew Object()a.name"egon";a.age18;ES6中新增了map数据结构&…

计算机公共基础知识教材,国家计算机二级考试公共基础知识教材

国家计算机二级考试公共基础知识教材国家计算机二级考试公共基础知识教材国家计算机二级考试公共基础知识教材公共基础知识总结之第一章数据结构与算法 ................................................................................. 1公共基础知识总结之第二章程序设计…

1.Strategy Pattern(策略模式)

策略模式&#xff08;Strategy Pattern&#xff09;&#xff1a; 我的理解&#xff0c;将代码中每个变化之处抽出&#xff0c;提炼成一个一个的接口或者抽象类&#xff0c;让这些变化实现接口或继承抽象类成为具体的变化类。再利用多态的功能&#xff0c;可将变化之处用接口或抽…

Spring MVC + Hibernate + Maven:CRUD操作示例

在本文中&#xff0c;我想研究一个Spring MVC Hibernate Maven用法的示例。 这套技术暗含领域领域的基础知识。 因此&#xff0c;我将尝试详细解释所有重要时刻。 其他没有主题的内容将提供指向更多详细信息源的链接。 在文章的结尾&#xff0c;我将发布GitHub的链接。 目标…

画出的点做交互_设计之下交互设计原型设计之概念设计

目录//交互设计//「设计之下」---交互设计&#xff1a;交互设计师是做什么的&#xff1f;上线的产品中那一块是交互设计师的产物呢&#xff1f;项目启动1.1「设计之下」---交互设计&#xff1a;项目启动之从想法到项目&#xff0c;什么是项目&#xff1f;1.2「设计之下」---交互…

Java集合之TreeMap源码解析上篇

上期回顾 上期我从树型结构谈到了红黑树的概念以及自平衡的各种变化&#xff08;指路上期←戳&#xff09;&#xff0c;本期我将会对TreeMap结合红黑树理论进行解读。 首先&#xff0c;我们先来回忆一下红黑树的5条基本规则。 1.结点是红色或者黑色&#xff0c; 2.根结点为黑色…

CSS3 Transform、Transition和Animation属性总结

CSS3的三个与变形和动画啊相关的属性&#xff1a; Transform 浏览器支持情况&#xff1a; Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性&#xff08;仅适用于 2D 转换&#xff09;。 Safari 和 Chrome…

综合云平台 - 前言 - 00

因为学习了 RHCA 云方向, 目前已经学了: CL210 OpenStack 私有云技术 CL220 CFME 混合云管理平台 RH236 GlusterFS 分布式存储 RH413 Hardening 安全 RH442 Performance Tuning 调优 RH318 Red Hat Enhanced Virtualization 虚拟化(传统虚拟机) DO280 OpenS…

15秋计算机基础作业3,东师15秋《计算机应用基础》在线作业3介绍.doc

计算机应用基础15秋在线作业3一、单选题(共?25?道试题&#xff0c;共?62.5?分。)V1.??国标码与机内码之间区别是A. 在机器内所占存储单元不同B. 机内码是ASCII码&#xff0c;国标码为非ASCII码C. 国标码是个每个字节最高位为1&#xff0c;机内码每个字节最高位为1D. 机内…

在Java中使用DOM,SAX和StAX解析器解析XML

我碰巧通读了有关Java中的XML解析和构建API的章节。 我试用了样本XML上的其他解析器。 然后&#xff0c;我想在我的博客上分享它&#xff0c;这样我就可以参考该代码以及任何阅读此书的参考。 在本文中&#xff0c;我将在不同的解析器中解析相同的XML&#xff0c;以执行将XML内…

仪器和软件通讯测试软件,软件定义的仪器-测试测量-与非网

如同每个孩子所拥有的第一套LEGO玩具改变了他们对世界的认识一样&#xff0c;26年前&#xff0c;美国国家仪器通过NI LabVIEW系统设计软件&#xff0c;重新改变了人们对仪器的认知。今年&#xff0c;NI将再次重演历史&#xff0c;发布一款新型仪器&#xff0c;帮助测试工程师摆…

埃森哲杯第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 C序列变换...

链接&#xff1a;https://www.nowcoder.com/acm/contest/91/C来源&#xff1a;牛客网没有账号的同学这样注册&#xff0c;支持博主 题目描述 给定两个长度为n的序列&#xff0c;ai, bi(1<i<n), 通过3种魔法使得序列a变换为序列b&#xff0c;也就是aibi(1<i<n). 魔…

ubuntu安装gnome桌面

1. apt install gnome-shell2. apt install ubuntu-gnome-desktop3. apt install unity-tweak-tool4. apt install gnome-tweak-tool转载于:https://www.cnblogs.com/regit/p/7978365.html

Spring MVC,Ajax和JSON第1部分–设置场景

我一直在考虑在Spring&#xff0c;Ajax和JSON上写博客&#xff0c;但是我从来没有做过。 这主要是因为它非常复杂&#xff0c;并且所需的技术一直处于变化状态。 当我决定撰写此博客时&#xff0c;我在Internet上有一个侦察员&#xff0c;如果您查看诸如Stack Overflow之类的地…

oracle 运营维护_Oracle数据库日常运维常用脚本

大中小Oracle数据库日常运维常用脚本1 查看所有数据文件select file_name from dba_data_filesunionselect file_name from dba_temp_filesunionselect name from v$controlfileunionselect value from v$parameter where namespfileunionselect member from v$logfile;2 查看正…

柜员计算机技能,新入职柜员必备软件:柜员技能训练系统最新版

如果你是新入职柜员的大学生&#xff0c;这个软件你肯定用得着&#xff01;如果你是资格老的柜员同胞&#xff0c;这个软件你肯定用得着&#xff01;这个软件&#xff0c;针对柜员的小键盘、打字和点钞三项技能要求&#xff0c;专门针对痛点开发&#xff0c;可以有效训练柜员的…

Html5和Css3扁平化风格网页

前言 扁平化概念的核心意义 去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素&#xff0c;这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上&#xff0c;则强调了抽象、极简和符号化。 示例 视频效果&…

独立线性度 最佳直线

找到的散点线性拟合方法都是基于最小二乘法的&#xff08;numpy.polyfit()&#xff0c;scipy.optimize()) 以下是根据 GB/T 18459-2001中附录 A2 提供的独立线性度拟合方法&#xff0c;求得的最佳拟合直线 import mathdef find_line(x0, y0):根据散点求得端基直线k,b,并得到每点…

第4章 使用 Spring Boot

使用 Spring Boot 本部分将详细介绍如何使用Spring Boot。 这部分涵盖诸如构建系统&#xff0c;自动配置以及如何运行应用程序等主题。 我们还介绍了一些Spring Boot的最佳实践(best practices)。 虽然Spring Boot没有什么特殊之处&#xff08;它只是一个可以使用的库&#xff…