


广州web培训
达内广州五羊中心
18087159764
广州web培训本文给大家介绍下不需要任何javascript代码,仅使用纯CSS3和HTML实现鼠标悬停的超酷效果,鼠标在悬停目标元素上的时候可以实现常见的线条变化、翻转、缩放、滑动等等动画效果。
HTML部分
我们在.he_border1里放置一张图片,以及图片说明信息。
<div class="box">
<div class="he_border1">
<img class="he_border1_img" src="pro_1.jpg" alt="Image 01">
<div class="he_border1_caption">
<h3 class="he_border1_caption_h">HelloWeb</h3>
<p class="he_border1_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_border1_caption_a" href="http://www.helloweb.wang/" target="_blank"></a>
</div>
</div>
</div>
CSS部分
我们要实现的效果是,当鼠标放到图片上时,图片放大,图片上方将出现一个带透明度的遮罩层,并且出现四条线框变化动画,最终四条线框闭合成方形,在方形里显示图片说明文字。这种效果在很多图片站、以及产品列表页应用非常广泛。
.he_border1 {
background: #fe7253;
width: 360px;
height: 240px;
padding: 0;
margin: 0;
border: 1px solid #000;
position: relative;
box-sizing: border-box;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
overflow: hidden
}
.he_border1 .he_border1_img {
display: block;
width: 100%;
padding: 0;
margin: 0;
position: relative;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
opacity: 1;
overflow: hidden
}
.he_border1:hover .he_border1_img {
position: absolute;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
opacity: .6
}
.he_border1 .he_border1_caption {
color: #fff;
padding: 0;
margin: 0;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
overflow: hidden
}
.he_border1 .he_border1_caption::before,.he_border1 .he_border1_caption::after {
position: absolute;
content: '';
opacity: 0;
-webkit-transition: opacity 0.4s,-webkit-transform .4s;
-moz-transition: opacity 0.4s,-moz-transform .4s;
-o-transition: opacity 0.4s,-o-transform .4s;
transition: opacity 0.4s,transform .4s
}
.he_border1 .he_border1_caption::before {
top: 8%;
right: 10%;
bottom: 8%;
left: 10%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
-moz-transform: scale(0,1);
-o-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0
}
.he_border1 .he_border1_caption::after {
top: 8%;
right: 10%;
bottom: 8%;
left: 10%;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
-moz-transform: scale(1,0);
-o-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0
}
.he_border1:hover .he_border1_caption::before,.he_border1:hover .he_border1_caption::after {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
.he_border1 .he_border1_caption,.he_border1 .he_border1_caption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
overflow: hidden;
z-index: 1000
}
.he_border1 .he_border1_caption_h {
font-size: 1.3em;
font-weight: 700;
text-align: center;
width: 80%;
position: absolute;
top: 20%;
left: 10%;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
overflow: hidden;
opacity: 1
}
.he_border1 .he_border1_caption_p {
font-size: 1em;
text-align: center;
width: 80%;
position: absolute;
top: 60%;
left: 10%;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
overflow: hidden;
opacity: 0
}
.he_border1:hover .he_border1_caption_p {
top: 45%;
opacity: 1
}
以上代码充分利用了CSS3的动画属性transform的使用,将鼠标悬停动画效果展现出来。
怕钱不够?就业挣钱后再付学费; 怕学不会? 真正0基础入学,120天精通; 担心就业? 7万家雇主企业,名企内部就业