今日は、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);} }