css3开门
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
margin:0;
padding:0;
}
.door{
/* width:450px;
height:450px;*/
margin:0 auto;
width:1200px;
height:600px;
position:relative;
background:#a1a1a1;
}
.door .leftDoor,.door .rightDoor{
position:absolute;
/* width:224px;
height:400px;*/
width:600px;
height:520px;;
top:50px;
background:#d1d1d1;
}
.door .leftDoor{
left:0;
border-right:1px solid #999;
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:leftDoor 2s 1;
-webkit-transform-origin: 0% 40%;
}
.door .rightDoor{
right:0;
border-left:1px solid #999;
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:rightDoor 2s 1;
-webkit-transform-origin: 100% 40%;
} @-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%;
}
0%{
-webkit-transform:perspective(0) rotateY(0) scale(1);
}
100% {
-webkit-transform:perspective(800px) rotateY(-90deg) scale(0.2,1);
}
}
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%;
}
0%{
-webkit-transform:perspective(0) rotateY(0) scale(1);
}
100% {
-webkit-transform:perspective(800px) rotateY(90deg) scale(0.2,1);
}
}
</style>
</head>
<body>
<div class="door">
<div class="leftDoor"></div>
<div class="rightDoor"></div>
</div>
</body>
</html>
css3开门的更多相关文章
- CSS3实现开门动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...
- 案例-开门效果CSS3
<style> .door { width: 288px; height: 153px; border: 2px solid #333; margin: 150px auto; backg ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
随机推荐
- SqlSever基础 intersect 交集 两个查询结果共有的
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- winfrom增删改查
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- JAVA——getter setter
package org.hanqi.pn0120; public class User { private int userid; private String username; private S ...
- Windows下通过bat脚本实现自动上传文件到ftp服务器
@Echo Off Echo open ip_address [port] >ftp.up Echo [username]>>ftp.up Echo [password]>&g ...
- 搭建本地的git仓库
折腾了快一天了,终于搭建成功了. 分享一下搭建的步骤: 一.GIT仓库的创建 1. adduser git 2. passwd git 此例设置git的密码为123456 3. cd /home/gi ...
- ERROR 1044 (42000): Access denied for user 'root'@'localhost' to database 'mysql'
mysql> use mysqlERROR 1044 (42000): Access denied for user 'root'@'localhost' to database 'mysql' ...
- LSMW应用
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [C和指针]第二部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Java——Java日期转Sql日期
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...
- javascript权威指南笔记--javascript语言核心（六）
通过ECMAScript 3创建的属性都是可写的.可枚举的.可配置的. 在ECMAScript 5中,数据属性的4个特性分别是它的值.可写性.可枚举性.可配置性.存取器属性的特性是读取.写入.可枚举性 ...