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 ...
随机推荐
- [bzoj1051] [HAOI2006]受欢迎的牛 （Tarjan+缩点）
强连通图,缩点 Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受 ...
- 解决Win7下UAC开启时无法响应WM_DROPFILES消息
//以管理员身份运行,程序窗口就可以接收到拖放文件消息[WM_DROPFILES]了. ChangeWndMessageFilterOk(WM_DROPFILES, MSGFLT_ADD); Chan ...
- DIV的表单布局
表单布局其实用表格最好了,可是表格的话,无法定位,这个是一个硬伤. <!DOCTYPE html> <html> <head> <meta charset=& ...
- 从Unity学UE（一）之蓝图类的使用----制作一个可控灯光
转自:http://blog.csdn.net/u011707076/article/details/44171829 首先申明,本文章内容适合有Unity引擎基础的童鞋享用,如果不了解Unity引擎 ...
- iOS开发学习笔记:基础篇
iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境 ...
- VS2008中开发智能设备程序的一些总结
原文链接:http://blog.csdn.net/citybug_nj/article/details/2598705 程序中包括四个部分: 系统配置 这个部分用来配置系统中的相关参数,参数包括数据 ...
- 通过EasyUI Tree说明SQL GUID和自增列ID的使用场景
最新在开发中用到了EasyUI里面的Tree,通过API可以看到这个Tree的数据格式如下: 其中ID比较重要,API也说了,最开始我考虑到GUID比自增ID多占用了一些空间,所以采用的自增ID,测试 ...
- Xcode：Foundation框架找不到，或者是自动提示出现问题
问题描述:Foundation框架找不到,或者是自动提示出现问题 之前的操作:手贱,不少心把编译器里面的源码改了 处理办法:清理缓存 缓存位置:点击桌面后,选择系统菜单栏:前往—电脑—硬盘—用户—ap ...
- 面向对象的JavaScript系列二，继承
1.原型链 function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ ...
- 关于Android 构建
在简书上面有系列关于Android 的文章,还不错,部分同学可以在开发过程中阅读和学习:www.jianshu.com/collection/3fde3b545a35 关于Android 构建,看到这 ...