<!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. [Nhibernate]sqlite数据库基本使用

    目录 写在前面 操作步骤 总结 写在前面 昨天有朋友问我在nhibernate中如何使用sqlite数据库,当时实在忙的不可开交,下周要去山西出差,实在没空,按我的说法使用sqlite跟使用sqlse ...

  2. 【转~】初识贝塞尔曲线（Bézier curve）

    本文图文大多转自http://www.html-js.com/article/1628 QAQ我居然去扒维基,,,看不懂啊,,,我要去补数学,,, 在做变形小鸡的时候用到CSS3 transition ...

  3. java表格的使用 单元格绘制二

    JTable单元格是由单元格绘制器绘制出来的,这是一些执行TableCellRenderer接口的类.TableCellRenderer接口定义了唯一的getTableCellRendererComp ...

  4. [Qt]用QItemDelegate的来修改QStandardItem字体颜色

    1.重写ItemDelegate的Item方法 这里我使用的QListView来显示Log日志,将写好的代理在初始化中就可以直接赋值上. m_LogModel = new QStandardItemM ...

  5. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  6. 利用 autoconf 和 automake 生成 Makefile 文件

    一.相关概念的介绍 什么是 Makefile?怎么书写 Makefile?竟然有工具可以自动生成 Makefile?怎么生成啊?开始的时候,我有这么多疑问,所以,必须得先把基本的概念搞个清楚. 1.M ...

  7. sqlserver实现数据库读写分离介绍

    对于负载均衡,笔者经常接触的当属Oracle的负载均衡机制.下面我们重点介绍Sql Server 2005是如何实现负载均衡的,感兴趣的朋友可以参考下哈 Internet的规模每一百天就会增长一倍,客 ...

  8. setTimeout和setInterval的注意事项

    精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...

  9. C段渗透+cain嗅探

    其实吧这篇文件也是一个大概的了解和思路篇...没什么技术含量,但是你可以你可以从思路中来获得;其他的技术都是靠自己去摸索,我说了半天还是别人的,不如自己直接试试,这样效果比我直接告诉你的更加的深刻.. ...

  10. OC编程之道-创建对象之单例模式

    一 何为单例singleton模式?(what) 保证一个类只有一个实例,并提供一个访问它的全局访问点. 二 何时使用单例模式?(where) 1类只能有一个实例,而且必须从一个为人熟知的访问点对其访 ...