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的补间动画.但只有两个关键贞.开 ...

随机推荐

CSS Hank兼容浏览器的
color:red; /* 所有浏览器都支持 */ color:red !important; /* 除IE6外 */ _color:red; /* IE6支持 */ *color:red; /* I ...
Junit4单元测试之高级用法
Junit单元测试框架是Java程序开发必备的测试利器,现在最常用的就是Junit4了,在Junit4中所有的测试用例都使用了注解的形式,这比Junit3更加灵活与方便.之前在公司的关于单元测试的培训 ...
Haskell Json数据处理
json的基本类型为——string, numbers, Booleans以及null,定义json类型如下 -- file: Json.hs module Json where data JValu ...
[Q]关于无法进入主界面问题解答
打图精灵适用于AutoCAD2007或更高版,低于2007版无法使用. 若在安装打图精灵前AutoCAD已经打开,则需要将AutoCAD重新打开,然后使用“QPlot”命令. 若重新打开仍然调不出界面 ...
MAC OS 快捷键一览
OS X 键盘快捷键键盘快捷键是通过按下键盘上的组合键来调用 OS X 功能的一种方式.了解有关常见 OS X 键盘快捷键的信息. 若要使用键盘快捷键,您可以同时按修饰键和字符键.例如,按下 Com ...
abowman
http://abowman.com/google-modules/ball-clock/
hadoop操作
常用命令: https://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html ls命令 /usr/bin/hadoop/software/hadoop/ ...
私有云Mariadb集群搭建
MariaDB作为Mysql的一个分支,在开源项目中已经广泛使用,例如大热的openstack,所以,为了保证服务的高可用性, 同时提高系统的负载能力,集群部署是必不可少的. MariaDB Gale ...
STM32普通定时器(TIM2-7)的时钟源
STM32普通定时器(TIM2-7)的时钟源
Jni Tips
1.JavaVM and JNIEnv JNI有两种关键的数据结构,JavaVM和JNIEnv,两者均为指向VM方法JNI方法的列表的的指针(C++版本中它们是Class,Class的所有成员均为函数 ...

CSS3 transform的demo1

CSS3 transform的demo1的更多相关文章

随机推荐

热门专题