css3_html/css_WEB-ITnose に基づいた非常に実用的なマウス ホバー効果

今日は、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: 500;}.opac{  opacity: 0;}.contener:hover .opac{  width:310px;  position: absolute;  z-index: 1;  font-family: 'Roboto';  font-size: 25px;  color: #ffffff;  font-weight: 300;  line-height: 140px;  height:140px;  opacity: 1;  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:0;-webkit-transform: rotate(-45deg);}  100% {opacity:1;-webkit-transform: rotate(0deg);}   }@-moz-keyframes oblik {  0% {opacity:0;-moz-transform: rotate(-45deg);}  100% {opacity:1;-moz-transform: rotate(0deg);}   }@-ms-keyframes oblik {  0% {opacity:0;-ms-transform: rotate(-45deg);}  100% {opacity:1;-ms-transform: rotate(0deg);}   }@keyframes oblik {  0% {opacity:0;transform: rotate(-45deg);}  100% {opacity:1;transform: rotate(0deg);}   }