html⿏标悬停半透明效果,⼀款纯css3实现的⾮常实⽤的⿏标悬
停特效演⽰
脚本之家之前已经介绍很多利⽤纯css3实现⿏标特效的⽂章了，今天给⼤家带来⼀款基于css3⾮常实⽤的⿏标悬停特效。这款特效，当⿏标经过时候⼀个半透明的遮罩层倒下来。效果很好，⽽且是纯css3实现的，代码很少，⾮常实⽤。 效果如下：
实现的代码：
html代码：
复制代码代码如下:
LOW POLY BACKGROUND
Download
css3代码：
复制代码代码如下:
.contener
{
width:310px;
css特效文字
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);}
}