<!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. CODEVS 3145 汉诺塔游戏 递归

    题目描述 Description 汉诺塔问题(又称为河内塔问题),是一个大家熟知的问题.在A,B,C三根柱子上,有n个不同大小的圆盘(假设半径分别为1-n吧),一开始他们都叠在我A上(如图所示),你的 ...

  2. A840S黑砖修复过程(2013-05-22修改)

    首先感谢su_ky大神,没有他的博客和帖子,这次救砖根本没有成功的可能.其次谢谢A840S交流群284998898的Sunny deng,没有他提供的分区镜像同样也完成不了这次的工作.现象:手机完全没 ...

  3. 在JSP页面显示九九乘法表

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. Cheatsheet: 2013 10.01 ~ 10.08

    Other 20 Tips for becoming a better programmer Top 10 Movies for Programmers .NET RaptorDB - The Key ...

  5. C#无需IIS构建XmlRpc服务器

    准备 我们使用CookComputing.XmlRpcServerV2 3.0.0来构建XmlRpc服务器. 新建一个控制台项目,在项目中添加对CookComputing.XmlRpcServerV2 ...

  6. HDU 5038 Grade（分级）

    Description 题目描述 Ted is a employee of Always Cook Mushroom (ACM). His boss Matt gives him a pack of ...

  7. P2P小贷网站业务数据流程分享

    P2P小贷网站业务数据流程分享 引言 这是去年年底开发的一个项目,完成后和用户的衔接没有很好的做起来,所以项目就搁浅了.9月以来,看各路P2P风声水起,很是热闹:这里分享下我的设计文档,算是抛砖引玉, ...

  8. .net 浏览器请求过程（图）

    大致: 细节: (信息来源于传智播客教学视频)

  9. 关于Docker 常用命令

    Docker 常用命令 分类列一下常用的CLI命令 仓库相关 search/ pull / push / login etc. 例:docker pull ubuntu 从仓库下载ubuntuimag ...

  10. 转-Android Studio *.jar 与 *.aar 的生成与*.aar导入项目方法

    主要讲解Android Studio中生成aar文件以及本地方式使用aar文件的方法. 在Android Studio中对一个自己库进行生成操作时将会同时生成*.jar与*.aar文件. 分别存储位置 ...