css3新动_css3实现鼠标悬停动态特效

鼠标悬停效果就是当鼠标划过指定区域时会有一个事件与效果了，下面来看一个一款基于css3非常实用的鼠标悬停特效，希望对各位有帮助。

效果如下

html代码：

代码如下	复制代码
LOW POLY BACKGROUND Download

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);} }