<!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. Android 中 Service AIDL使用

         1.创建两个项目创建两个.aidl文件 2.在传递值的类里面创建Service并且返回接口: 服务返回值onBind public IBinder onBind(Intent intent) ...

  2. 我的android学习经历24

    Fragment生命周期 1.onAttach() 2.onCreate() 3.onCreateView() 4.onActivityCreated() 5.onStart() 6.onResume ...

  3. jquery之each()、$.each()[jQuery.each()]

    导航: 1,jQuery对象(实例)的each()函数 2,全局jQuery对象的each()函数 一:jQuery对象(实例)的each()函数 each()函数用于以当前jQuery对象匹配到的每 ...

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

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

  5. Java编译环境的搭建（eclipse）

    每用一种语言开发,要搭建其编译和开发环境,我们废话不说,立刻来看看Java开发环境的搭建. 1.安装JDK和JRE Windows环境下: a.去Oracle官网下载对应版本的JDK安装包,http: ...

  6. .NET在后置代码中输入JS提示语句（背景不会变白）

    来源:http://niunan.iteye.com/blog/248256 Page.ClientScript.RegisterStartupScript(Page.GetType(), " ...

  7. Quartz.Net 调度框架配置介绍

    在平时的工作中,估计大多数都做过轮询调度的任务,比如定时轮询数据库同步,定时邮件通知等等.大家通过windows计划任务,windows服务等都实现过此类任务,甚至实现过自己的配置定制化的框架.那今天 ...

  8. Linux_文档编辑器_简介

    1. vi 2. vim 3. ubuntu 有一个 自己的图形化的 文档编辑器,用起来比较方便: gedit 4. 5.

  9. maven setting.xml配置说明

    文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...

  10. Oracle的参数文件

    参数文件的作用: 它们是在数据库实例启动时候加载的,决定了数据库的物理结构.内存.数据库的限制及系统大量的默认值.数据库的各种物理属性.指定数据库控制文件名和路径等信息,是进行数据库设计和性能调优的重 ...