<!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. centos7 安装 mariadb 的正确命令

    使用的是linode的centos7系统,安装mysql发现已经默认的是mariadb. 但是不管是使用linode官网说明还是百度搜索到的的根本安装方法无法安装成功. 总是提示这一句: ERROR  ...

  2. 手机开机画面制作工具(LogoBuilder)

    手机开机画面制作工具(LogoBuilder) 本人想在自己的设备中采用其他设备上开机的logo,首先需要此设备上的logo.bin,然后用LogoBuilder解压出来,具体步骤如下: 1.     ...

  3. Cheatsheet: 2014 08.01 ~ 08.31

    Web Slow Server? This is the Flow Chart You're Looking For A Strolll Through Node: Introduction .NET ...

  4. Lucky String

    Lucky String -- 微软笔试 标签(空格分隔): 算法 A string s is LUCKY if and only if the number of different charact ...

  5. plot bar chart using python

    Example import matplotlib.pyplot as plt import plotly.plotly as py # Learn about API authentication ...

  6. 从xubuntu-->windows xp

    捣鼓了两个月的ubuntu之后我又乖乖的回到了windows的怀抱,不是抛弃linux而是要适应身边的环境. 身边的板子的驱动基本上都是xp的老一点的还是vista的,让人情何以堪. 我努力克服了,用 ...

  7. SQL VIEW 使用语法

    之前一直都不知道VIEW有什么作用,写程序的时候也很少遇到过,复习SQL语句的时候碰到了,就记录下来吧. 什么是视图? 在 SQL 中,视图是基于 SQL 语句的结果集的可视化的表. 视图包含行和列, ...

  8. ubuntu linux 使用常见问题

    Q:gedit不支持windows下的中文显示 A:http://wiki.ubuntu.org.cn/Gedit%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81 Q:bash ...

  9. 2013 Multi-University Training Contest 8

    HDU-4676 Sum Of Gcd 题意:给定一个1-N的全排列序列,N<=20000,有Q组询问,Q<=20000,每组询问给出左右区间[l, r],问区间内的任意两个数的gcd之和 ...

  10. hibernate对象关系实现(一)一对多

    hibernate是对jdk一个封装工具,实现对象和数据库之间数据映射.使用时涉及到四个问题:a.对象之间的关系在类中的体现:b,对象关系对应的数据库中表之间体现:c.实现a,b在hibernate的 ...