<!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. echarts统计图使用

    网址:http://echarts.baidu.com  提示:不需要导入Jquery.js 使用: 1.导入js,echarts.js 2.创建容器 <!-- 为ECharts准备一个具备大小 ...

  2. ImageView的常用属性

    ImageView的一些常用属性,并且这些属性都有与之对应的getter.setter方法: android:adjustViewBounds:设置ImageView是否调整自己的边界来保持所显示图片 ...

  3. 去掉IE11的叉叉

    在 IE11 下,浏览器自作多情在 text input 组件上加一个 close 叉叉: 用CSS伪类定义: input::-ms-clear { display: none; }

  4. 精选9个值得学习的 HTML5 效果【附源码】

    这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

  5. 解决VirtualBox只能安装32位系统的问题

    发现自己的笔记本(Thinkpad E440)里的 VirtualBox 只能安装 32位 的系统,如下图所示: 经过一番查资料,发现这玩意需要到BIOS里设置一下,方可安装 64位 系统,操作如下: ...

  6. window下安装zookeeper

    本地zookeeper安装(win7)下载zookeeper-3.3.6.zip文件解压zookeeper-3.3.6.zip文件到d:盘在D:\zookeeper-3.3.6\conf下增添 zoo ...

  7. Codeforces 699D Fix a Tree 并查集

    原题:http://codeforces.com/contest/699/problem/D 题目中所描述的从属关系,可以看作是一个一个块,可以用并查集来维护这个森林.这些从属关系中会有两种环,第一种 ...

  8. android studio--百度定位集成001

    安卓现在的大趋势已经是普遍使用androidstudio(安装包[https://yunpan.cn/ckc54idj3JVJb  访问密码 664f])了.这个是集成的一个好的环境. 今天来搞个百度 ...

  9. 深入解析PHP中的(伪)多线程与多进程

    本篇文章是对PHP中的(伪)多线程与多进程进行了详细的分析介绍,需要的朋友参考下 (伪)多线程:借助外力利用WEB服务器本身的多线程来处理,从WEB服务器多次调用我们需要实现多线程的程序.QUOTE: ...

  10. unlink和close关系

    今天看到nginx用文件锁实现互斥的实现方案时,发现,unlink文件后还可需用fd,很是纳闷!于是搜索到此文,并自测了下,涨姿势了~分享给大家~ 原理: 每一个文件,都可以通过一个struct st ...