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的补间动画.但只有两个关键贞.开 ...
随机推荐
- CUDA开发时用到的各种Linux命令
cat 读取文件中的全部内容. 例:cat cuda_add.cu
- openstack私有云布署实践【16.3 Windows Server2008 R2 只有C盘分区镜像制作】
之所以要只有C盘分区镜像,是因为在创建VM或者调整云主机的硬盘大小时,它能自动扩容.无需人工介入 参考http://www.iyunv.com/thread-45149-1-1.html的灵感 ...
- Attempt to write to field 'android.support.v4.app.FragmentManagerImpl android.support.v4.app.Fragment.mFragmentManager' on a null object reference
E/AndroidRuntime﹕ FATAL EXCEPTION: mainProcess: org.example.magnusluca.drawertestapp, PID: 3624java. ...
- Java错误提示is not an enclosing class
今天脑袋晕乎乎的,犯了个低级错误,好半天才反应过来 一直提示:is not an enclosing class 我居然把 RegisterActivity.class 写成了 RegisterAct ...
- 运行ORB-SLAM笔记_编译篇（一）
1.下载代码 https://github.com/raulmur/ORB_SLAM/ (同时也可以看看作者的牛叉论文,我是打算先用代码,再回头看论文) 2.打开后如下 就好像是用一件新产品 ...
- Python学习笔记——基础篇【第六周】——logging模块
常用模块之logging 用于便捷记录日志且线程安全的模块 import logging logging.basicConfig(filename='log.log', format='%(ascti ...
- X11 基本绘图
#include <X11/Xlib.h> int main() { Display * dsp = XOpenDisplay(NULL); int screenNum = Default ...
- SXT分布式缓存技术公开课的观后感
最近几天在研究Redis,Redis作为最近比较流行的缓存技术,其特点还是很明显的,Redis使用Key-Value的结构来存储数据,Redis也是内存型的数据库,数据一开始是保存在内存中的,通过某些 ...
- old linkedin profile
employments: software engineer intern: Karl Storz Imaging, 2015-06 to 2015-09. software engineer int ...
- Java基础第二章