这篇文章主要为大家分享了8组超炫酷纯css3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下
这是一款效果超酷的纯CSS3鼠标滑过图片动画效果，它共分为8组不同的效果，它们分别在鼠标滑过图片时，以不同的方式显示遮罩层和图片标题。每一组效果又分为3种不同的鼠标滑过图片效果。
这些鼠标滑过图片时的动画效果都是使用CSS3来完成的，分别有：滑动效果，倾斜效果，翻转效果，旋转效果等等，下面是一张GIF的预览图片。
使用方法
在页面中引入hover-effects.css文件。
立即学习“前端免费学习笔记（深入）”；
登录后复制
HTML结构
以其中一种鼠标滑过图片动画效果为例，它的HTML结构如下：
![利用CSS3实现了八组超炫酷鼠标滑过图片动画]()
Your Title
......
Learn more
登录后复制
CSS样式
.effect-1{ float: left; width: 340px; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible; } .effect-1 img{ transition: 0.5s; } .effect-1:hover img{ transform: scale(0.3) translateY(-110%); position: relative; z-index: 9; } .effect-1 .text-desc{ transform: translateY(100%); opacity: 0; padding: 85px 20px 10px; transition: 0.5s; } .effect-1:hover .text-desc{ transform: translateY(0px); opacity: 1; }
登录后复制
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
利用SVG和CSS3实现炫酷的边框动画
CSS3实现鼠标悬停显示扩展内容
CSS实现文字环绕图片的效果
以上就是利用CSS3实现了八组超炫酷鼠标滑过图片动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2895587.html
