一款基于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:;
}
.opac
{
opacity:;
}
.contener:hover .opac
{
width:310px;
position: absolute;
z-index:;
font-family: 'Roboto';
font-size: 25px;
color: #ffffff;
font-weight:;
line-height: 140px;
height:140px;
opacity:;
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:;-webkit-transform: rotate(-45deg);}
100% {opacity:;-webkit-transform: rotate(0deg);}
}
@-moz-keyframes oblik {
0% {opacity:;-moz-transform: rotate(-45deg);}
100% {opacity:;-moz-transform: rotate(0deg);}
}
@-ms-keyframes oblik {
0% {opacity:;-ms-transform: rotate(-45deg);}
100% {opacity:;-ms-transform: rotate(0deg);}
}
@keyframes oblik {
0% {opacity:;transform: rotate(-45deg);}
100% {opacity:;transform: rotate(0deg);}
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/9986
一款基于css3非常实用的鼠标悬停特效的更多相关文章
- 一款基于css3的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
- 一款基于css3的散子3D翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body& ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 一款基于css3的动画按钮
之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 5个基于css3超炫的鼠标滑动按钮动画
今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
- 一款基于css3和jquery实现的动画弹出层
今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...
- 一款基于jquery超炫的图片切换特效
今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览 源码下载 来看下实现的 ...
随机推荐
- 【laravel5.4】查询构造器对象与模型instance的互相换换
1.查询构造器一般情况下返回对象,但是无法直接使用model类的一些方法,如toJson.toArray等 DB::table 结果转换成 model 类实例[collect 实例] public f ...
- 更改npm全局模块和cache默认安装位置
来源于:http://blog.csdn.net/friendan/article/details/51736231 1.因为我安装的Node.js自带了npm,所以在nodejs文件夹里面新建以下两 ...
- PHP中的一些安全配置
PHP中的配置至关重要,包含php.ini的配置,还有系统权限的配置,一下是我总结的一些配置 一.PHP的模块 ./configure \ --with-libdir=lib64 \ --prefix ...
- JavaScript 设计模式之代理模式
一.代理模式概念解读 1.代理模式概念文字解读 代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...
- eclipse 快捷键设置
“window→Preferences→General→Keys→你想设置的快捷键" PS(Postscript)我常用的快捷键: 撤销 Undo Ctrl+Z 还原 Redo ...
- 使用ShareSDK完成第三方(QQ、微信、微博)登录和分享
这几天遇到一个需求:做第三方登录和分享.遇到了一些坑,把整个过程整理记录下来,方便他人,同时也捋一下思路. 当时考虑过把每个平台的SDK下载下来,一个一个弄,一番取舍后决定还是用ShareSDK.这里 ...
- JMeter ----内置函数列表
Jmeter有两种类型的函数: 用户定义的静态值(或变量) 内置函数 用户定义的静态值允许用户定义变量时被替换为静态的值测试树编译并提交运行.需要注意的是,变量目前无法嵌套,即${Var${N}}不起 ...
- FA_会计中的折旧方式的种类(概念)
2014-06-08 Created By BaoXinjian
- 转:ASP.NET MVC 将IList<T>导出Excel文档的泛型类
/// <summary> /// 提供将泛型集合数据导出Excel文档. /// </summary> /// <typeparam name="T" ...
- 整理了一份招PHP高级工程师的面试题(转)
1. 基本知识点 HTTP协议中几个状态码的含义:1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 100 (继续) 请求者应当继续提出请求. 服务器返回此代码 ...