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的补间动画.但只有两个关键贞.开 ...
随机推荐
- 那些年，我们被耍过的bug——haslayout
你被IE的bug耍过几次了? IE,这个令所有网站设计人员讨厌,但又不得不为它工作的浏览器.不论是6.7还是8,它们都有一个共同的渲染标准haslayout,所以haslayout 是一个非常有必要彻 ...
- SEO之关键词选择
在网站优化中,关键词应该是奠基石,选择好关键词的重要性也不言而喻了.怎样选择合理化的关键词呢?这个是我今天了解到的. 1.选择的关键词首先是有人搜索过的.没人搜索的词优化就是浪费时间. 2.做有效流量 ...
- 两种画线算法(DDA&Bersenham)
DDA(digital differential analyzer) 由直线的斜截式方程引入 对于正斜率的线段,如果斜率<=1,则以单位x间隔(δx=1)取样,并逐个计算每一个y值 Yk+1 = ...
- SpannableString可以被点击的文字
1 TextView tv= (TextView) findViewById(R.id.textview_z); String text="一段可以被点击点击的文字,文字可以变成图片&quo ...
- Oracle 表空间和用户权限管理【转】
一. 表空间 Oracle数据库包含逻辑结构和物理结构. 数据库的物理结构指的是构成数据库的一组操作系统文件. 数据库的逻辑结构是指描述数据组织方式的一组逻辑概念以及它们之间的关系. 表空间是数据库逻 ...
- 关于Windows Boot Manager、Bootmgfw.efi、Bootx64.efi、bcdboot.exe 的详解
1. http://bbs.wuyou.com/forum.php?mod=viewthread&tid=303679&fromuid=396698
- python--day4--迭代器、生成器
列表生成式: 需求:列表[1,2,3,4,5,6,7,8,9]每个值加1,实现的方法: a = [0,1,2,3,4,5,6,7,8,9] b = [] for i in a:b.append(i+1 ...
- 面试JS篇
1.闭包 ECMAScript对其进行了简单的描述:允许使用内部函数(即函数定义和函数表达式位于另一个函数的函数体内),而且,这些内部函数可以访问他们所在的外部函数中声明的所有局部变量.参数和声明的其 ...
- 共享AFHTTPSessionManager 单例好处浅析
很多时候,AFNetworking都是目前iOS开发者网络库中的不二选择.Github上2W+的star数足见其流行程度.而从iOS7.0开始,苹果推出了新的网络库继承者NSURLSession后 ...
- php 常用的调试方法
file_put_contents("c:\1.log","输出字符串",FILE_APPEND);第三个参数是防止前面的内容被覆盖 error_log(pri ...