首页 > 代码库 > 一款基于css3非常实用的鼠标悬停特效
一款基于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: 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);} }
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9986
一款基于css3非常实用的鼠标悬停特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。