<!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. IT 外包中的甲方乙方，德国人，美国人，印度人和日本人印象杂谈

    开篇介绍 最近经常和朋友聚会,三十而立的年龄自然讨论最多的就是各自的小家庭,如何赚钱,工作,未来的就业发展,职业转型等话题.还有各种跳槽,机会选择,甲方乙方以及外包中的各种趣事,外企与国内私企的发展机 ...

  2. hadoop源码编译——2.5.0版本

    强迫症必治: WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using b ...

  3. ReflectionToStringBuilder类

    ReflectionToStringBuilder类是用来实现类中的toString()方法的类,它采用Java反射机制(Reflection),通过reflection包中的AccessibleOb ...

  4. 【krpano】krpano xml资源解密（破解）软件说明与下载（v1.2）

    欢迎加入qq群551278936讨论krpano技术以及获取最新软件.   该软件已经不再维护,现在已经被KRPano资源分析工具取代,详情参见 http://www.cnblogs.com/reac ...

  5. [PHP][位转换积累]之与运算截取二进制流的值

    function getBit( $num, $bit, $mask ){ return $num>>$bit&$mask; } var_dump( getBit( 41, 3, ...

  6. selenium 总结篇，常见方法和页面元素的操作

    今天,总结一下selenium怎么操作web页面常见的元素. 主要有: 上传 alter dialog prompt dialog confirm dialog select list radio b ...

  7. 安装Yeoman，遇到的问题

    在安装Yeoman遇到了一些报错,具体的步骤就不多说了,直接上码,具体的两处报错的地方. 第一个,创建webapp,直接报权限的错误,这时才留意到在它之前还有一个错误. [root@iZ289zd8c ...

  8. iOS App更改显示的项目名

    添加Key: Bundle display name 后面value直接添加想改变的值

  9. 基于Z-WAVE 协议的LED智能照明系统的研究笔记

    LED调光基础: ☆:LED照明调光控制信号的方式有两种: 1. 通过PWM信号控制LED灯具开关电源的占空比从而实现调光: 2. 通过调光控制信号和交流电源供电线合用的两线式或三线式(例如LED相控 ...

  10. 开放封闭原则（Open Closed Principle）

    在面向对象的设计中有很多流行的思想,比如说 "所有的成员变量都应该设置为私有(Private)","要避免使用全局变量(Global Variables)",& ...