CSS3 transform的demo1
<!DOCTYPE html>
<html>
<head>
<title>弹出层演示</title>
<meta charset="utf-8">
<style type="text/css">
.ts1{
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.ts2{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
.ts3{
-webkit-transition:all 0.8s ease-out;
-moz-transition:all 0.8s ease-out;
-o-transition:all 0.8s ease-out;
-ms-transition:all 0.8s ease-out;
transition:all 0.8s ease-out;
}
.dl1{
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.dl2{
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.dl3{
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.warp{
word-break: keep-all;
white-space: nowrap;
}
.thum{
display: inline-block;
*display: inline;
zoom:1;
width: 140px;
height: 120px;
padding: 10px;
border: solid 1px #F3F3F3;
position: relative;
overflow: hidden;
}
.thum h3{
width: 100%;
height: 26px;
line-height: 26px;
margin: 25px 0;
background: #000;
color: #fff;
}
.mask{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top:0px;
text-align: center;
background-color:#009CDC;
}
a.preview-btn {
width: 60px;
height: 22px;
line-height: 22px;
text-align: center;
display: inline-block;
text-decoration: none;
background: #000;
color: #fff;
text-transform: lowercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
} /*效果*/
.thum .mask{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.thum:hover .mask{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.85)";
filter: alpha(opacity=0.85);
opacity: 0.85;
}
.thum:hover img{
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
}
.thum h3{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
}
.thum:hover h3{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.thum a.preview-btn{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
}
.thum:hover a.preview-btn{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
</style>
</head>
<body>
<div class="warp">
<div class="thum">
<img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/>
<div class="mask ts3 dl1">
<h3 class="ts1 dl3">示例1</h3>
<a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a>
</div>
</div>
<div class="thum">
<img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/>
<div class="mask ts3 dl1">
<h3 class="ts1 dl3">示例2</h3>
<a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a>
</div>
</div>
<div class="thum">
<img class="ts2" width="140" height="120" src="http://www.8788.cn/uploadfile/2013/0407/20130407105213645.jpg"/>
<div class="mask ts3 dl1">
<h3 class="ts1 dl3">示例3</h3>
<a class="preview-btn ts1 dl2" onclick="javascript:void(0);">预览</a>
</div>
</div> </div> </body>
</html>
CSS3 transform的demo1的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 小心 CSS3 Transform 引起的 z-index "失效"
https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...
- CSS3 transform rotate（旋转）锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
- 基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class= ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
随机推荐
- php 常量定义
php常量定义及取值 常量在定义时赋值: 不能变 :不能销毁: 具有超全局作用于:常量只能储存标量数据(字符 整型 浮点 ): <?php define("hello", ...
- openstack私有云布署实践【17 配置文件部份说明】
Nova部份 cpu_allocation_ratio = 4.0 物理 CPU 超售比例,默认是 16 倍,超线程也算作一个物理 CPU,需要根据具体负载和物理 CPU 能力进行综合判断后确定具体的 ...
- Lua math库
函数名 描述 示例 结果 pi 圆周率 math.pi 3.1415926535898 abs 取绝对值 math.abs(-2012) 2012 ceil 向上取整 math.ceil(9.1) 1 ...
- 按键精灵http.定义getWeb
Function 取网页源码(URL) Set objXML=CreateObject("Microsoft.XMLHTTP") objXML.Open "Get&quo ...
- centos-php安装
初学者自编文档,如有错误,请指出,具体命令就不阐述了,不明白 度娘吧! nginx我是编译安装在服务器上 和其他安装应该会有区别 安装路径路径:/usr/local/ 安装包存放位置:/home/ap ...
- mysql 创建用户与授权、修改密码
mysql版本:5.6.35 1.创建用户 #foo表示你要建立的用户名,后面的123表示密码, #localhost限制在固定地址localhost登陆 CREATE USER foo@localh ...
- Little Puzzlers–List All Anagrams in a Word
The Solution A major hint is in the fact we are given a dictionary. Because we are given this dicti ...
- super在构造函数中的运用
package example;//在子类构造对象时,访问子类构造函数时候,父类也运行.//原因是:在子类的构造函数中第一行有一个默认的隐式语句super();/* 构造函数不能覆盖 子类的实例化过程 ...
- OpenCV程序在Debug时出现「PDB文件无法加载」的一个解决方法
这几天毕设要用到OpenCV,按照网上的教程来搭建开发环境. 用的是OpenCV 3.0 beta + Visual Studio Community 2013.我的系统64位是Win 8.1,但在加 ...
- Linux下Modules的概念及使用详解[转贴]
一.什么是 modules? modules 的字面意思就是模块,在此指的是 kernel modules:简单来说,一个模块提供了一个功能,如 isofs.minix.nfs.lp 等等.传统来讲, ...