css3怎么制作打开的大门动画

首先，先在中加入门

然后写好大门的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); }}

这里的动画主要用到的是rotate和perspective

如果想要动画点击后才开门，可以加入一个按钮，然后js控制

注意要写个浏览器兼容

这个动画不适应ie8以下浏览器