简要教程

这是一款使用纯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中文网！

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

相关标签：CSS3