css3动画大门打开

首先，先在<body></body>中加入门

　　然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景]　　div{　　margin:0;　　padding:0;　　}　　.door{　　width:450px;　　height:450px;　　position:relative;　　background:#a1a1a1;　　}　　.door .leftDoor,.door .rightDoor{　　position:absolute;　　width:224px;　　height:400px;　　top:57px;　　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 5s 1;　　-moz-animation:leftDoor 5s 1;　　-o-animation:leftDoor 5s 1;　　animation:leftDoor 5s 1;　　-webkit-transform-origin: 0% 40%;　　-moz-transform-origin: 0% 40%;　　-o-transform-origin: 0% 40%;　　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 5s 1;　　-moz-animation:rightDoor 5s 1;　　-o-animation:rightDoor 5s 1;　　animation:rightDoor 5s 1;　　-webkit-transform-origin: 100% 40%;　　-moz-transform-origin: 100% 40%;　　-o-transform-origin: 100% 40%;　　transform-origin: 100% 40%;　　}

　　先为左边的门添加动画　　@-webkit-keyframes leftDoor {　　0%,100% {　　-webkit-transform-origin: 0% 40%;　　}　　0{　　-webkit-transform:perspective(0) rotateY(0);　　}　　100% {　　-webkit-transform:perspective(600px) rotateY(70deg);　　}　　}　　@-moz-keyframes leftDoor {　　0%,100% {　　-moz-transform-origin: 0% 40%;　　}　　0{　　-moz-transform:perspective(0) rotateY(0);　　}　　100% {　　-moz-transform:perspective(600px) rotateY(70deg);　　}　　}　　@-o-keyframes leftDoor {　　0%,100% {　　-o-transform-origin: 0% 40%;　　}　　0{　　-o-transform:perspective(0) rotateY(0);　　}　　100% {　　-o-transform:perspective(600px) rotateY(70deg);　　}　　}　　@keyframes leftDoor {　　0%,100% {　　transform-origin: 0% 40%;　　}　　0{　　transform:perspective(0) rotateY(0);　　}　　100% {　　transform:perspective(600px) rotateY(70deg);　　}　　}

　　然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了　　@-webkit-keyframes rightDoor {　　0%,100% {　　-webkit-transform-origin: 100% 40%;　　}　　0{　　-webkit-transform:perspective(0) rotateY(0);　　}　　100% {　　-webkit-transform:perspective(600px) rotateY(-70deg);　　}　　}　　@-moz-keyframes rightDoor {　　0%,100% {　　-moz-transform-origin: 100% 40%;　　}　　0{　　-moz-transform:perspective(0) rotateY(0);　　}　　100% {　　-moz-transform:perspective(600px) rotateY(-70deg);　　}　　}　　@-o-keyframes rightDoor {　　0%,100% {　　-o-transform-origin: 100% 40%;　　}　　0{　　-o-transform:perspective(0) rotateY(0);　　}　　100% {　　-o-transform:perspective(600px) rotateY(-70deg);　　}　　}　　@keyframes rightDoor {　　0%,100% {　　transform-origin: 100% 40%;　　}　　0{　　transform:perspective(0) rotateY(0);　　}　　100% {　　transform:perspective(600px) rotateY(-70deg);　　}　　}

　　5　　这里的动画主要用到的是rotate和perspective　　6　　如果想要动画点击后才开门，可以加入一个按钮，然后js控制

时间： 2024-07-30 13:46:46

css3动画大门打开的相关文章

CSS3动画-抛物线

CSS3动画之抛物线今天来说下CSS3动画,目标是让一个方块做抛物线运动.主要用到的CSS3属性有animation,transform,@keyframes,transition等. Animation版-0 我们先建立一个HTML文件,test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="an

Bootstrap 轮播加上css3动画，炫酷到底！

对于网站开发者来说,对展示内容增加一个滑动或者是轮播效果的是非常常见的需求.收费和免费的轮播插件多的是不胜枚举.其中很多提供很多有用的配置选项和动态效果. 很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能.同时你的项目是采用Bootstrap,(一个最流行的开源前端框架)的话.你可以参考一下bootstrap官方组件. 这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果.同时确保这个js组件自由扩展和快速上手. 介绍Animate.css 为了让我自己写的动画效果值

CSS3 动画animation

关键帧什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中,元素div由50X50红色的大小变化到状态100X100 黄色的过程中,这一头一尾的两个状态起到了对动画定义的关键作用.所以这两个状态就是整个动画的关键帧. @keyframes 定义动画关键帧通过之前的胡说现在我们看到@keyframes就不会觉得这个@符号有多别扭了.我们使用它来定义动画的关

CSS3动画帧数科学计算法http://tid.tenpay.com/?p=5983

总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 —————————————————————- 本篇文章来自腾讯内部饭卡充值改版项目的CSS3动画经验总结.虽然你们访问不到我们的饭卡站点,不过可以小窥一下我们的动画示例哟. (请使用chrome.safari或firefox浏览器看效果,效果地址) 实现上面“嘀卡萌风骚乱舞”的动画,比较麻烦的是,要凭感觉自己算参数写代码,重复试个千百回,才能达

【转】15个无比华丽的HTML5/CSS3动画应用

原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心.本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习.1.HTML5/CSS3图片选择动画可选择多张图片今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的层,上面有一个勾,并且在选中的时候图片出现弹跳的动画效果. 在线演示

CSS3 动画卡顿性能优化解决方案--摘抄

最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示到底是什么意思? 所以这又触碰到了我的知识盲区,不过项目在磕磕绊绊中完成的差不多了,但是遇到了CSS3动画渲染的性能问题,所以我也是被逼的,再回过头来从浏览器渲染网页的流程出发,去找动画卡顿的症结. 浏览器渲染网页的流程如下: 使用 HTML 创建文档对象模型(DOM) 使用 CSS 创建 CSS 对象模型(CSSOM) 基于 DOM 和 CSS

CSS3学习（CSS3过渡、CSS3动画）

CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加过渡效果.我们仅仅使用到了一个transition属性,专门来写过渡从一个样式到另一个样式过渡时所花费的时间,以秒为单位.若时长不规定,默认为0,即没有过渡时间.在使用这个过渡效果的时候,我们使用了类似于超链接的l(link).v(visited).h(hover).a(active)样式的控制.此

css3动画--边框线条动画

网上看到一个css3动画,地址最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配