简要教程
这是一款使用纯css3制作的鼠标滑过图片遮罩层动画特效。该特效中，当鼠标滑过或悬停在图片上面时，会在图片上出现遮罩层动画，展示出图片的描述信息和链接图标按钮。
使用方法
在页面中引入bootstrap样式文件和font-awesome字体图标文件。
HTML结构
该特效的HTML结构如下：
CSS样式
为该鼠标滑过图片遮罩层特效添加如下的CSS样式。
.box{ text-align: center; overflow: hidden; position: relative;}.box:before{ content: ""; width: 0; height: 100%; background: #000; padding: 14px 18px; position: absolute; top: 0; left: 50%; opacity: 0; transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}.box:hover:before{ width: 100%; left: 0; opacity: 0.5;}.box img{ width: 100%; height: auto;}.box .box-content{ width: 100%; padding: 14px 18px; color: #fff; position: absolute; top: 38%; left: 0;}.box .title{ font-size: 25px; font-weight: 600; line-height: 30px; text-transform: uppercase; margin: 0; opacity: 0; transition: all 0.5s ease 0s;}.box .post{ font-size: 15px; text-transform: capitalize; opacity: 0; transition: all 0.5s ease 0s;}.box:hover .title,.box:hover .post{ opacity: 1; transition-delay: 0.7s;}.box .icon{ padding: 0; margin: 0; list-style: none; margin-top: 15px;}.box .icon li{ display: inline-block;}.box .icon li a{ display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: #f74e55; font-size: 20px; font-weight: 700; color: #fff; margin-right: 5px; opacity: 0; transform: translateY(50px); transition: all 0.5s ease 0s;}.box:hover .icon li a{ opacity: 1; transform: translateY(0px); transition-delay: 0.5s;}.box:hover .icon li:last-child a{ transition-delay: 0.8s;}@media only screen and (max-width:990px){ .box{ margin-bottom: 30px; }}
更多纯CSS3鼠标滑过图片遮罩层动画特效相关文章请关注PHP中文网！
立即学习“前端免费学习笔记（深入）”；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607629.html
微信扫一扫 
支付宝扫一扫 
