内容简介：这是一款css3鼠标经过动画特效。在该特效中，当鼠标经过图片时，图片略微放大，底部遮罩层出现，同时图片的描述文字和链接会以动画的方式出现在遮罩层之上，非常炫酷。
这是一款css3鼠标经过动画特效。在该特效中，当鼠标经过图片时，图片略微放大，底部遮罩层出现，同时图片的描述文字和链接会以动画的方式出现在遮罩层之上，非常炫酷。
HTML结构
示例中，我们使用Bootstrap布局，该css3鼠标经过动画特效的HTML结构如下：
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="images/img-1.jpg">
<ul class="icon">
<li><a href="#"><i class="fa fa-search"></i></a></li>
<li><a href="#"><i class="fa fa-link"></i></a></li>
</ul>
<div class="box-content">
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="images/img-2.jpg">
<ul class="icon">
<li><a href="#"><i class="fa fa-search"></i></a></li>
<li><a href="#"><i class="fa fa-link"></i></a></li>
</ul>
<div class="box-content">
<h3 class="title">Kristiana</h3>
<span class="post">Web Designer</span>
</div>
</div>
</div>
</div>
</div>
CSS样式
然后通过下面的CSS样式来实现该css3鼠标经过动画特效。
.box{
text-align: center;
overflow: hidden;
position: relative;
}
.box:before{
content: "";
width: 150%;
height: 150%;
position: absolute;
top: 50%;
left: 50%;
background: radial-gradient(rgba(255,255,255,0.1) 15%, transparent 15%) 0 0,
radial-gradient(rgba(255,255,255,0.1) 15%, transparent 15%) 16px 16px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 16px 17px;
background-size: 32px 32px;
background-color: rgba(0,0,0,0.5);
opacity: 0;
z-index: 1;
transform: translate(-50%, -50%) scale(0);
transition: all 0.56s ease 0s;
}
.box:hover:before{
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.box img{
width: 100%;
height: auto;
transition: all 0.3s ease 0s;
}
.box:hover img{ transform: scale(1.3); }
.box .box-content{
width: 100%;
position: absolute;
bottom: 5px;
left: 0;
z-index: 1;
transition: all 0.3s ease 0s;
}
.box .title{
font-size: 22px;
font-weight: 600;
color: #47ddc8;
text-transform: uppercase;
text-shadow: 0 0 2px #000;
opacity: 0;
margin: 0 0 5px 0;
position: relative;
transform: translateY(100%);
transition: all 0.5s ease 0s;
}
.box:hover .title{
opacity: 1;
transform: translateY(0);
}
.box .post{
display: block;
font-size: 14px;
font-style: italic;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 5px;
transform: translateX(-100%) rotateX(90deg);
transition: all 0.5s ease 0s;
}
.box:hover .post{ transform: translateY(0) rotate(0); }
.box .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
transition: all 0.3s ease 0s;
}
.box .icon li{
display: inline-block;
margin: 0 7px;
transform: rotateX(90deg);
transition: all 0.3s ease 0s;
}
.box .icon li:last-child{ transition-delay: 0.2s; }
.box:hover .icon li{ transform: rotateX(0); }
.box .icon li a{
display: block;
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 5px;
background: #fff;
font-size: 17px;
color: #505050;
transition: all 0.3s ease 0s;
}
.box .icon li a:hover{
background: #47ddc8;
box-shadow: 0 0 10px #000;
color: #fff;
}
@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Head First HTML5 Programming
Eric Freeman、Elisabeth Robson / O'Reilly Media / 2011-10-18 / USD 49.99
What can HTML5 do for you? If you're a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key featur......一起来看看 《Head First HTML5 Programming》 这本书的介绍吧!
