手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >一款纯css3实现的非常实用的鼠标悬停特效演示
一款纯css3实现的非常实用的鼠标悬停特效演示
摘要:查字典教程网之前已经介绍很多利用纯css3实现鼠标特效的文章了,今天给大家带来一款基于css3非常实用的鼠标悬停特效。这款特效,当鼠标经过时...

查字典教程网之前已经介绍很多利用纯css3实现鼠标特效的文章了,今天给大家带来一款基于css3非常实用的鼠标悬停特效。这款特效,当鼠标经过时候一个半透明的遮罩层倒下来。效果很好,而且是纯css3实现的,代码很少,非常实用。 效果如下:

一款纯css3实现的非常实用的鼠标悬停特效演示1

实现的代码:

html代码:

<div align="center">

<div>

<div>

LOW POLY BACKGROUND</div>

<div>

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

}

【一款纯css3实现的非常实用的鼠标悬停特效演示】相关文章:

用css实现隐藏文本框

17个有趣实用的CSS 3悬停效果教程

CSS实现圆柱型数据报表的方法

一款纯css3实现的动画加载导航

最近在网页中常用的css和js酷炫动画效果

CSS3实现漂亮的按钮动画

CSS+DIV实现鼠标经过背景变色

用css3实现当鼠标移进去时当前亮其他变灰效果

提高淘宝C店转化率的实用代码

css3的图形3d翻转效果应用示例

精品推荐
分类导航