<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 <title></title>
 <style>
 *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 html,body{
  height: 100%;
  min-width: 320px;
  overflow: hidden;
 }
 .bg{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
 }
 .door{
  position: absolute;
  width: 50%;
  height: 100%;
  background: #1391ff;
  -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
 }
 .door-left{
  z-index: 90;
  left: 0;
  top: 0;
 }
 .door-right{
  z-index: 89;
  right: 0;
  top: 0;
 }
 .door-left:after{
  content:"";
  position: absolute;
  left: 100%;
  top: -50%;
  width: 1px;
  height: 200%;
  background: #000;
  -webkit-transform: scale(.5);
  transform: scale(.5);
 }
 .lock{
  position: absolute;
  left:50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  width: 50px;
  height: 50px;
  background: red;
  color: #fff;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  -webkit-transition: opacity 1s ease 0s;
  transition: opacity 1s ease 0s;
  z-index: 98;
 }
 .openLeft{
  animation:openLeft 2s ease both;
  -webkit-animation:openLeft 2s ease both;
 }
 .openRight{
  animation:openRight 2s ease both;
  -webkit-animation:openRight 2s ease both;
 }
 @-webkit-keyframes openLeft {
   0% {
     -webkit-transform-origin: 0 40%;
     -webkit-transform: perspective(0px) rotateY(0deg);
   }
 
   100% {
     -webkit-transform-origin: 0 40%;
     -webkit-transform: perspective(600px) rotateY(90deg);
   }
 }
 @keyframes openLeft {
   0% {
     transform-origin: 0 40%;
     transform: perspective(0px) rotateY(0deg);
   }
 
   100% {
     transform-origin: 0 40%;
     transform: perspective(600px) rotateY(90deg);
   }
 }
 @-webkit-keyframes openRight {
   0% {
     -webkit-transform-origin: 100% 40%;
     -webkit-transform: perspective(0px) rotateY(0deg);
   }
 
   100% {
     -webkit-transform-origin: 100% 40%;
     -webkit-transform: perspective(600px) rotateY(-90deg);
   }
 }
 @keyframes openRight {
   0% {
     transform-origin: 100% 40%;
     transform: perspective(0px) rotateY(0deg);
   }
 
   100% {
     transform-origin: 100% 40%;
     transform: perspective(600px) rotateY(-90deg);
   }
 }
 </style>
</head>
<body>
 <div class="bg">
  <section>
   <div class="door door-left"></div>
   <div class="door door-right"></div>
   <div class="lock">开</div>
  </section>
  <section class="page2">
  </section>
 </div>
 <script>
 document.querySelector(".lock").onclick=function(){
  document.querySelector(".door-left").classList.add("openLeft");
  document.querySelector(".door-right").classList.add("openRight");
  this.style.opacity=0;
 }
 </script>
</body>
</html>
演示地址：  开门

CSS3实现开门动画的更多相关文章

  1. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  4. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  5. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  6. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  7. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  8. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  9. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

随机推荐

  1. 安装MariaDB和简单配置

    1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start maria ...

  2. 深入理解javascript原型和闭包（10）——this

    接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...

  3. 【Solr】新建core后，启动服务访问web报错 HTTP Status 503

    新建core collection2后,启动solr服务,访问solr web界面报错. HTTP Status 503 - Server is shutting down or failed to ...

  4. CF memsql Start[c]UP 2.0 A

    CF memsql Start[c]UP 2.0 A A. Golden System time limit per test 1 second memory limit per test 256 m ...

  5. PHP获取指定月份的第一天开始和最后一天结束的时间戳函数

    <?php /** * 获取指定月份的第一天开始和最后一天结束的时间戳 * * @param int $y 年份 $m 月份 * @return array(本月开始时间,本月结束时间) */ ...

  6. Linux C 字符函数 getchar()、putchar() 与 EOF 详解

    首先给出<The_C_Programming_Language>这本书中的例子: #include <stdio.h> int main() { int c; c = getc ...

  7. Linux下的Apache和PHP安全设置，如何开启PHP的安全模式

    Linux下的Apache和PHP安全设置 PHP安全模式开启,PHP5.3将不再有安全模式. (1) safe_mode:以安全模式运行php; 在php.ini文件中使用如下 safe_mode ...

  8. JDK source 之 ArrayList 需要注意事项

    线程安全 ArrayList内部没有实现原子性操作,所以是非线程安全的.如果需要在线程安全的环境下使用List的话,需要使用Vector 或者CopyOnWriteArrayList,具体场景,自行深 ...

  9. Python的垃圾回收机制

    Python的GC模块主要运用了“引用计数”(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过“标记-清除”(mark and sweep)解决容器对象可能产生的 ...

  10. jQuery视差滚动插件，（附原理分析，调用方法）

    演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...