前端CSS3鼠标悬浮过渡缩放效果
2年前 (2024-04-13)CSS2.9k
复制本页网址打印
以下为一个纯css写的图片鼠标悬浮缩放效果，其实基本原理十分简单，我们访问一些网站可以发现他们都会对图片做一些交互效果的处理，当然实现图片过渡效果有很多方式，例如使用JQuery或者一些第三方js动画库，本例仅是展示基本的效果，不对所用知识进行归纳。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script></script> <style> * { box-sizing: border-box; } body { background-color: rgb(251, 163, 163); } /* 长条图样式 */ .containlist { position: relative; margin-top: 100px; margin-left:10%; height: 100px; width: 80%; overflow: hidden; border-radius: 30px; box-shadow: rgb(54, 53, 53) 10px 10px 10px; } .list { position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; border-radius: 30px; transition: 0.5s; color: white; font-weight: bold; text-align: center; } .list:hover { transform: scale(1.2); } </style> </head> <body> <h1 style="text-align: center;color: white;background-color: black;">效果测试</h1> <!-- 长条图 --> <div class="containlist"> <div class="list" style="background-image: url(006.jpg);"> 和服の少女 </div> </div> <div class="containlist"> <div class="list" style="background-image: url(001.png);"> 天空の鏡 </div> </div> <div class="containlist"> <div class="list" style="background-image: url(002.png);"> 紫の景色 </div> </div> <div class="containlist"> <div class="list" style="background-image: url(003.png);"> 私は一番可愛いです </div> </div> </body> </html> 实际效果：
git图
图片的样式可以自行进行更改，打造你自己的中二风格。
好了，以上就是前端CSS3鼠标悬浮过渡缩放效果相关的全部内容，希望对您有帮助！
赞0
打赏
重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！