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

程序员东波技术 2022年11月7日

0 收藏 990 点赞 864 浏览 1425 个字

今天给大家带来一款基于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);}
}