纯CSS3实现超酷的鼠标悬停效果

广州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的使用，将鼠标悬停动画效果展现出来。