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 ...
随机推荐
- SVN Unable to connect to a repository at URL问题解决
图1 之前用的好好的,不知道为什么今天就不行了,根据网上给的方法TortoiseSVN -> Settings -> Saved Data,点击个个"Clear"按钮, ...
- 【转载】OGRE 内存管理
原文:OGRE 内存管理 Ogre引擎中与内存管理相关的文件大致有以下几个(只列出头文件) OgreAlignedAllocator.h OgreMemoryAllocatedObject.h Ogr ...
- HQL语句大全（转载）
Hibernate配备了一种非常强大的查询语言,这种语言看上去很像SQL.但是不要被语法结构 上的相似所迷惑,HQL是非常有意识的被设计为完全面向对象的查询,它可以理解如继承.多态 和关联之类的概念. ...
- 情报收集：Metasploit命令、查询网站和测试网站
外围信息收集: testfire.com IBM建立的测试网站 http://www.maxmind.com 查找一些网站的地理位置 http://searchdns.netcraft.com/ 查询 ...
- mysql获得自增字段下一个值
初次研究: 表: sql: show table status from carsale_db LIKE 'tb_car' 结果: 想办法取得这其中的值.... 在Internet上找到这个资料: M ...
- 战胜C语言中令人头疼的问题
C语言一共32个关键字,下面一一列出: 1.auto声明自动变量 在默认情况下,编译器默认所有变量都是auto 2.int声明整型变量 3.double声明双精度变量 4.long声明长整型变量 ...
- 64位Eclipse运行时提示“Failed to load the JNI shared library \Java\jre6\bin\client\jvm.dll”的一个解决方案
系统安装的32位JREE,64位eclipse无法识别,解决方案:下载安装64位jdk即可.
- iOS - Swift NSNumber 数字
前言 public class NSNumber : NSValue public class NSDecimalNumber : NSNumber NSNumber 可以被赋值为各种数值类型.我们可 ...
- rpm 更新/升级 软件包（libGL-devel手动安装过程）
rpm参数解释 -i 安装 -h 解压rpm的时候打印50个斜条 (#) -v 显示详细信息 升级命令rpm -Uvh rpm文件名 参数解释 -U 升级 -h 解压rpm的时候打印50个斜条 (#) ...
- MonkeyRunner学习（1）测试连接
前期的环境搭建详见:http://www.cnblogs.com/peng-lan/p/5388488.html 1.打开模拟器 打开模拟器有两种方法,正常的在eclipse 中启动就不介绍了 另一种 ...