<!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. Burpsuite 重要插件

    1.Gason:Burpsuite-sqlmap插件,该插件可以让burp与sqlmap轻松对接,深度发掘SQL注入漏洞. 2.fuzzdb:fuzzing测试数据库,开源,深度测试SQL注入,xss ...

  2. URL详解

    浏览器因特网资源:URL是浏览器寻找信息时所需的资源位置,通过URL,应用程序才能找到并使用共享因特网上大量的数据资源. 大部分URL都遵循一种标准的格式: ①HTTP协议(http://或者http ...

  3. PHP正则表达式模式修饰符详解

    PHP模式修饰符又叫模式修正符,是在正则表达式的定界符之外使用.主要用来调整正则表达式的解释,提扩展了正则表达式在匹配.替换等操作的某些功能,增强了正则的能力.但是有很多地方的解释都是错误的,也容易误 ...

  4. multipart/form-data和application/x-www-form-urlencoded的区别

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明:  application/x-www-form-urle ...

  5. 使用Entity Framework通过code first方式创建数据库和数据表

    开发环境 WIN10 Entity Framework6.0  MVC5.0  开发工具 VS2015  SqlServer2012 1.创建上下文Context继承DbContext,并创建其他的业 ...

  6. HFS远程命令执行漏洞入侵抓鸡黑阔服务器

    先来科普一下: HFS是什么? hfs网络文件服务器 2.3是专为个人用户所设计的HTTP档案系统,如果您觉得架设FTP Server太麻烦,那么这个软件可以提供您更方便的网络文件传输系统,下载后无须 ...

  7. PYTHON 写函数，检查传入列表的长度，如果大于2，那么仅保留前两个长度的内容，并将新内容返回给调用者

    def a2(arg): if len(arg) > 2: del arg[2:] li = [12,13,14,15] a2(li) print(li)

  8. windows7下php5.4成功安装imageMagick，及解决php imagick常见错误问题。（phpinfo中显示不出来是因为：1.imagick软件本身、php本身、php扩展三方版本要一致，2.需要把CORE_RL_*.dll多个文件放到/php/目录下面）

    windows7下   php5.4成功安装imageMagick . (phpinfo中显示不出来是因为:1.软件本身.php本身.php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个 ...

  9. 启动apache和tomcat端口被占用解决办法

    1,打开控制台,使用命令 netstat -aon|findstr 8090  找出端口被占用的进程, 2,使用 taskkill -f -pid 4116(进程id)杀掉当前占用端口的进程

  10. jython安装与配置

    安装jython 0. 计算机中要安装jdk 1. 在官网www.jython.org上找到下载页面,然后下载jython-installe 2. 在cmd.exe中运行java -jar jytho ...