当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了。实现这样的动态效果主要是为了突出产品内容,提高用户体验。
对于代码小白来说,这样的效果固然很吸引人但是想要通过html/css代码实现,可能一时不知道从何处下手。
其实代码实现是非常简单,下面我们就通过简单的示例,给大家介绍实现鼠标经过图片放大的方法。
鼠标移入图片放大效果的html/css代码示例如下:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>html/Css3实现图片缩放</title> <style type=text/css> #div1{ width: 500px; margin: 150px auto; } #div1 img{ transition: all 0.5s; border-radius:5px; border: #eee solid 2px; } #div1 img:hover{ transform: scale(1.5); } </style> </head> <body style=background: #000> <div id=div1> <img src=123123.png /> </div> </body> </html>
首先前台访问,图片效果如下图所示:
然后我们将鼠标悬停在图片时,效果如下图:
从图中显然可以发现图片被放大了。
本段代码大家可以直接复制在本地测试,这里主要用到的一些css/css3属性有:
border-radius:向 div 元素添加圆角边框。
:hover 选择器用于选择鼠标指针浮动在上面的元素。
transform :向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中,值scale(x,y) 定义 2D 缩放转换。(本示例设置图片缩放1.5倍)
transition:一个简写属性,用于设置四个过渡属性。(本示例设置图片放大时的过渡时间为0.5秒,避免效果过于突兀)
本篇文章就是关于用html/css/css3实现当鼠标经过图片时放大的效果介绍。非常简单易懂,希望对需要的朋友有所帮助!
想要了解跟多HTML/css知识,可以关注编程之家HTML视频教程和CSS视频教程、CSS3视频教程,欢迎大家参考学习!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。