首先，先在<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控制
