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的补间动画.但只有两个关键贞.开 ...
随机推荐
- 【IE6的疯狂之十二】一个display:none引起的3像素的BUG
今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码: <div style="width: ...
- CentOS 6.5安装PostgreSQL9.3.5时报错: jade: Command not found
CentOS 6.5安装PostgreSQL9.3.5时报错: jade: Command not found 1[root@pghost1 postgresql-9.3.5]# ./configur ...
- validate验证
导入需要的js 自动验证 <script src="${ctx }/static/assets/js/jquery-2.1.4.min.js">< ...
- python 命名规范
参考Google开源项目风格指南:https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/cont ...
- 常用mysql命令
net start mysql命令,启动mysql数据库 1:查看服务器上存在哪些数据库:show databases;2:建立数据库mydb: create database mydb;3:使用你所 ...
- c++ inline关键字的理解
1. inline是实现修饰符,而非声明修饰符,所以应该用于实现部分的修饰(你也可以放置inline在声明,但是没有必要) 2. 所有中类中定义的函数都默认声明为inline函数,所有我们不用显示地去 ...
- 物流进程html+css页面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...
- bash脚本退出代码解释
Exit Codes With Special Meanings Table E-1. Reserved Exit Codes Exit Code Number Meaning Example Com ...
- super在构造函数中的运用
package example;//在子类构造对象时,访问子类构造函数时候,父类也运行.//原因是:在子类的构造函数中第一行有一个默认的隐式语句super();/* 构造函数不能覆盖 子类的实例化过程 ...
- 数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG，因为当前没有数据库备份
结尾日志的问题 还原选择中去掉结尾日志就可以了 转载自:http://blog.csdn.net/aojiancc2/article/details/46316451