一款基于css3非常实用的鼠标悬停特效

今天给大家带来一款基于css3非常实用的鼠标悬停特效。这款特效，当鼠标经过时候一个半透明的遮罩层倒下来。效果很好，而且是纯css3实现的，代码很少，非常实用。效果如下：

实现的代码：

html代码：

 <div align="center" style="position: relative;">

        <div class="contener">

            <div class="txt_init">

                LOW POLY BACKGROUND</div>

            <div class="opac">

                Download</div>

        </div>

    </div>

css3代码：

  .contener

{

  width:310px;

  height:140px;

  background-image:url(fond.png);

  overflow: hidden;

  cursor: pointer;

  position:relative;

}

.txt_init

{

  position: absolute;

  bottom: 5px;

  right: 5px;

  font-family: 'Roboto';

  font-size: 22px;

  color: #ffffff;

  font-weight:;

}

.opac

{

  opacity:;

}

.contener:hover .opac

{

  width:310px;

  position: absolute;

  z-index:;

  font-family: 'Roboto';

  font-size: 25px;

  color: #ffffff;

  font-weight:;

  line-height: 140px;

  height:140px;

  opacity:;

  background-color: rgba(0,0,0,0.7);

  -webkit-animation:oblik 0.4s ease-in;

  -webkit-transform-origin: 0% 100%;

  -moz-animation:oblik 0.4s ease-in;

  -moz-transform-origin: 0% 100%;

  -ms-animation:oblik 0.4s ease-in;

  -ms-transform-origin: 0% 100%;

  animation:oblik 0.4s ease-in;

  transform-origin: 0% 100%;

}

@-webkit-keyframes oblik {

  0% {opacity:;-webkit-transform: rotate(-45deg);}

  100% {opacity:;-webkit-transform: rotate(0deg);}

}

@-moz-keyframes oblik {

  0% {opacity:;-moz-transform: rotate(-45deg);}

  100% {opacity:;-moz-transform: rotate(0deg);}

}

@-ms-keyframes oblik {

  0% {opacity:;-ms-transform: rotate(-45deg);}

  100% {opacity:;-ms-transform: rotate(0deg);}

}

@keyframes oblik {

  0% {opacity:;transform: rotate(-45deg);}

  100% {opacity:;transform: rotate(0deg);}

}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9986

巴特西

一款基于css3非常实用的鼠标悬停特效

最新文章

热门文章