在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
文章标题为啥是“仿放大镜”? 好了,言归正传,我今天要说的是 鼠标移入时图片在原位置放大 的动画! 起初想到的是css3的 @keyframes属性 ,因为这个用的多一些嘛, 还比如:你可以通过transition实现( 今天重点 ) 先知:CSS3属性transform——(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 例如:
看起来是不是很生硬。我们再看一下加上 transition 的效果:
看了两个效果的差别,就大概明白 transition 属性的作用了吧。本例目标和宽度变化类似,只不过是换了一个最终效果。请继续往下看详细代码: <div id="container"> <img src="./little_boy.jpg" /> <span>大家好呀!我是谁你猜?</span> </div> #container { margin: 200px; position: relative; width: 300px; height: 300px; background-color: greenyellow; transition: transform .5s ease-out; } #container img { width: 100%; height: 100%; } #container span { position: absolute; top: 0; left: 0; margin: 6px; width: 100%; height: 20px; line-height: 20px; font-size: 18px; color: white; text-align: center; } #container:hover { transform: scale(1.3); } 解析: 到此这篇关于css3中仿放大镜效果的几种方式原理解析的文章就介绍到这了,更多相关css3仿放大镜内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论