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

随机推荐

Submission
EI: ICIC Express Letters: http://www.icicelb.org/elb/index.html IJICIC: http://www.ijicic.net/ijicic ...
tcp异常终止连接
服务端: #include <sys/socket.h> #include <unistd.h> #include <sys/types.h> #include & ...
添加JSTL 1.2 依赖库
添加JSTL 1.2 依赖库 JSTL 是一项很有历史的技术,而且版本自Java 5以来长期停留在1.2.但在做简单演示的页面时jstl依然有用,当前我们依然能看到这项技术(在博客.文档的demo里很 ...
PAT乙级1006. 换个格式输出整数 (15)
让我们用字母B来表示“百”.字母S表示“十”,用“12...n”来表示个位数字n(<10),换个格式来输出任一个不超过3位的正整数.例如234应该被输出为BBSSS1234,因为它有2个“百”. ...
sudo密码错误的解决办法
按一下Caps Lock键,如果大写灯亮了,再按一下. 然后重新输入sudo密码,尝试.
MYSQL主从同步故障一例及解决过程
公司里有两个mysql服务器做主从同步,某天Nagios发来报警短信,mysqla is down...赶紧联系机房,机房的人反馈来的信息是 HARDWARE ERROR 后面信息省略,让机房记下错误 ...
图片的 base64 编码
图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...
foreach 循环的应用传值
$arr=array(1,5,8,8,9);foreach ($arr as $key => $value) { //这里可以一边改外面$arr的值一边下一步循环 $value=++$value ...
mac版VMware fusion
百度网盘链接:链接: https://pan.baidu.com/s/1o8BAsrg 安装教程网上很多的,首先要下载一个window 10或其他版本的iso镜像文件,然后很好安装的.
jfinal获取服务器的IP和端口
String serverIp = getRequest().getServerName(); Integer serverPort = getRequest().getServerPort();

CSS3 transform的demo1

CSS3 transform的demo1的更多相关文章

随机推荐

热门专题