CSS3鼠标滑过放大图片效果
鼠标滑过图片自动放大,不用动一行 JS,全靠纯 CSS 搞定,蛮适合做电商图、相册预览这类交互场景的。通过:hover
配合transform: scale
,视觉效果挺自然,还能加上transition
让动画顺滑点。结构也简单,一个.image-container
包两张图,切换显示隐藏就行。
不过建议只放一张图片,通过 CSS 控制放大,不然加载两张图有点浪费。或者直接用背景图加background-size
也行,看你需求。如果你页面图片多,别忘了加overflow: hidden
限制容器,不然一放大就容易撑破布局。
你要是想看更多类似玩法,我这边也挑了几个还不错的资源:像Hover.css这种特效库,里面的样式直接拿来用就行。懒得写 CSS 的可以去翻翻。
,这种纯 CSS 的交互动效,写起来轻,跑得快,前端新手和老鸟都能上手。如果你也在做图文展示类的项目,真的可以试试。
下载地址
用户评论