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 ...
随机推荐
- Arduino中的setup()和loop()函数
今天看arduino的源代码,对于arduino中的setup和loop有了新的理解,可能你以前对于这俩个函数就是知道arduino是初始化,而loop是死循环,但是托若你看了Arduino的主函数你 ...
- 模板页显示Excel数据Gridview增删改查
<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" Au ...
- UVA 11552 四 Fewest Flops
Fewest Flops Time Limit:2000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Statu ...
- Cheatsheet: 2013 07.09 ~ 07.20
Mobile How to implement Android Splash Screen Migrating iOS MVC Applications to Windows Phone 8 (M-V ...
- Populating Tabular Data Block Manually Using Cursor in Oracle Forms
Suppose you want to populate a non-database data block with records manually in Oracle forms. This t ...
- shell 标出输入、标准输出、错误输出
shell中可能经常能看到:>/dev/null 2>&1 eg:sudo kill -9 `ps -elf |grep -v grep|grep $1|awk '{print ...
- source命令
source命令用法: source 文件名作用:在当前bash环境下读取并执行文件中的命令.注:该命令通常用命令“.”来替代.如:source .bash_rc 与 . .bash_rc 是等效的 ...
- Codeforces Round #249 (Div. 2) A题
链接:http://codeforces.com/contest/435/problem/A A. Queue on Bus Stop time limit per test 1 second m ...
- LAMP配置
参考资料: 1. http://www.cnblogs.com/zhuyp1015/p/3561470.html ↂ Apache服务器: 安装Apache: sudo apt-get install ...
- 概念学习（Concept Learning）
从特殊的训练样例中归纳出一般函数是机器学习的核心问题.一般函数是对理想目标函数的函数逼近(function approximation).简而言之,从特殊到普通.与此对应的是演绎推理(deductiv ...