css 图片 鼠标样式,CSS3鼠标hover图片动画样式

这是一款炫酷的CSS3鼠标hover图片动画样式。当鼠标hover图片时，图片遮罩层以3D翻转的方式出现。在炫酷的翻转动画之后，在遮罩层上显示图片的描述信息。

使用方法

在页面的head中引入bootstrap.min.css和font-awesome.min.css文件。

HTML结构

该CSS3鼠标hover图片动画样式使用Bootstrap网格进行界面布局，基本HTML结构如下：

Williamson

hover effect style

Kristiana

hover effect style

Steve Thomas

hover effect style

鼠标hover图片时产生遮罩层翻转动画的CSS3代码如下：

.box{

box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

position: relative;

}

.box img{

width: 100%;

height: auto;

}

.box .box-content{

width: 100%;

height: 100%;

background: rgba(130, 69, 124, 0.7);

padding: 20% 30px 20px;

position: absolute;

top: 0;

left: 0;

opacity: 0;

}

.box:hover .box-content{

animation-name: loading;

animation-duration: 1200ms;

animation-iteration-count: 1;

animation-timing-function: linear;

opacity: 1;

}

.box .title{

font-size: 17px;

font-weight: 600;

color: #fff;

text-transform: uppercase;

margin: 0 0 7px 0;

}

.box .post{

display: block;

font-size: 14px;

color: #fff;

font-style: italic;

margin-bottom: 25px;

}

.box .icon{

padding: 0;

margin: 0;

list-style: none;

}

.box .icon li{ display: inline-block; }

.box .icon li a{

display: block;

width: 40px;

height: 40px;

line-height: 40px;

border-radius: 50%;

text-align: center;

font-size: 16px;

color: #fff;

border: 1px solid #fff;

margin-right: 5px;

transition: all 0.3s ease 0s;

}

@keyframes loading{

0%{

-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

transform: perspective(400px) rotate3d(0, 1, 0, 90deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

opacity: 0;

}

40%{

-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

transform: perspective(400px) rotate3d(0, 1, 0, -20deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

60%{

-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

opacity: 1;

}

80%{

-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

transform: perspective(400px) rotate3d(0, 1, 0, -5deg);

}

100%{

-webkit-transform: perspective(400px);

transform: perspective(400px);

}

}

@media only screen and (max-width:990px){

.box{ margin-bottom: 20px; }

}