<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            margin:0;

            padding:0;

        }

        .door{

           /* width:450px;

            height:450px;*/

            margin:0 auto;

            width:1200px;

            height:600px;

            position:relative;

            background:#a1a1a1;

        }

        .door .leftDoor,.door .rightDoor{

            position:absolute;

          /*  width:224px;

            height:400px;*/

            width:600px;

            height:520px;;

            top:50px;

            background:#d1d1d1;

        }

        .door .leftDoor{

            left:0;

            border-right:1px solid #999;

            box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);

            -webkit-animation:leftDoor 2s 1;

            -webkit-transform-origin: 0% 40%;

        }

        .door .rightDoor{

            right:0;

            border-left:1px solid #999;

            box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1);

            -webkit-animation:rightDoor 2s 1;

            -webkit-transform-origin: 100% 40%;

        }

        @-webkit-keyframes leftDoor {

            0%,100% {

                -webkit-transform-origin: 0% 40%;

            }

        0%{

            -webkit-transform:perspective(0) rotateY(0) scale(1);

        }

        100% {

            -webkit-transform:perspective(800px) rotateY(-90deg) scale(0.2,1);

        }

        }

        @-webkit-keyframes rightDoor {

            0%,100% {

                -webkit-transform-origin: 100% 40%;

            }

        0%{

            -webkit-transform:perspective(0) rotateY(0) scale(1);

        }

        100% {

            -webkit-transform:perspective(800px) rotateY(90deg) scale(0.2,1);

        }

        }

    </style>

</head>

<body>

    <div class="door">

        <div class="leftDoor"></div>

        <div class="rightDoor"></div>

    </div>

</body>

</html>

css3开门的更多相关文章

  1. CSS3实现开门动画

    <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8&qu ...

  2. 案例-开门效果CSS3

    <style> .door { width: 288px; height: 153px; border: 2px solid #333; margin: 150px auto; backg ...

  3. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  4. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  5. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  6. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  7. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  8. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  9. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

随机推荐

  1. 关于htons和htonl

    htons的功能:将一个无符号短整型数值转换为网络字节序,即大端模式(big-endian) 参数u_short hostshort: 16位无符号整数 返回值:TCP / IP网络字节顺序. hto ...

  2. ViewController之间的切换动画

    一 .API介绍 iOS7开始,苹果推出了自定义转场动画API.从此,任何可以用Core Animation实现的动画,都可以出现在两个ViewController的切换之间 知识点图: 从上图可以看 ...

  3. 三HttpServletResponse对象介绍（1）

    转载自http://www.cnblogs.com/xdp-gacl/p/3789624.html Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象 ...

  4. bzoj 3118: Orz the MST（单纯形）

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3118 题意:给出一个图以及图中指定的n-1条边组成的生成树.每条边权值加1或者减去 ...

  5. 再论EM算法的收敛性和K-Means的收敛性

    标签(空格分隔): 机器学习 (最近被一波波的笔试+面试淹没了,但是在有两次面试时被问到了同一个问题:K-Means算法的收敛性.在网上查阅了很多资料,并没有看到很清晰的解释,所以希望可以从K-Mea ...

  6. [python]实现单机版一行wordcount

    用过spark,对wordcount这个演示程序记忆犹新,于是想试着实现一个简单的wordcount.又因为在学习函数式编程,希望可以把数据看成一个整体,在现有的函数上进行操作.于是就有了这一行代码. ...

  7. So easy Webservice 1.Socket建设web服务

    socket 是用来进行网络通讯的,简单来说,远程机器和本地机器各建一个socket,然后通过该socket进行连接通讯 socket简单模型图: socket的原理图: 代码实现: 1.创建sock ...

  8. implement "slam_karto" package in Stage simulation

    slam_karto ROS Wiki: http://wiki.ros.org/slam_karto Source: https://github.com/ros-perception/slam_k ...

  9. 自定义NSLog宏输出

    根据编译条件,Debug时输出带行号的日志,Release时关闭日志 /* XCode LLVM XXX - Preprocessing中Debug会添加 DEBUG=1 标志 */ #ifdef D ...

  10. js中的 ！！

    就是这样:!!variable.哈哈,其实我也是在代码里面看见别人这样用,当时很好奇,所以就搜了一下,哈哈.还真的有很多相关的好文啊.作者是这样说的, 一般用来将后面的表达式转换为布尔型的数据 是不是 ...