开门成功html,CSS3实现开门动画

*{

margin: 0;

padding: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html,body{

height: 100%;

min-width: 320px;

overflow: hidden;

}

.bg{

position: relative;

width: 100%;

height: 100%;

background: #fff;

}

.door{

position: absolute;

width: 50%;

height: 100%;

background: #1391ff;

-webkit-backface-visibility: visible !important;

backface-visibility: visible !important;

-webkit-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}

.door-left{

z-index: 90;

left: 0;

top: 0;

}

.door-right{

z-index: 89;

right: 0;

top: 0;

}

.door-left:after{

content:"";

position: absolute;

left: 100%;

top: -50%;

width: 1px;

height: 200%;

background: #000;

-webkit-transform: scale(.5);

transform: scale(.5);

}

.lock{

position: absolute;

left:50%;

top: 50%;

margin-left: -25px;

margin-top: -25px;

width: 50px;

height: 50px;

background: red;

color: #fff;

line-height: 50px;

text-align: center;

border-radius: 50%;

-webkit-transition: opacity 1s ease 0s;

transition: opacity 1s ease 0s;

z-index: 98;

}

.openLeft{

animation:openLeft 2s ease both;

-webkit-animation:openLeft 2s ease both;

}

.openRight{

animation:openRight 2s ease both;

-webkit-animation:openRight 2s ease both;

}

@-webkit-keyframes openLeft {

0% {

-webkit-transform-origin: 0 40%;

-webkit-transform: perspective(0px) rotateY(0deg);

}

100% {

-webkit-transform-origin: 0 40%;

-webkit-transform: perspective(600px) rotateY(90deg);

}

}

@keyframes openLeft {

0% {

transform-origin: 0 40%;

transform: perspective(0px) rotateY(0deg);

}

100% {

transform-origin: 0 40%;

transform: perspective(600px) rotateY(90deg);

}

}

@-webkit-keyframes openRight {

0% {

-webkit-transform-origin: 100% 40%;

-webkit-transform: perspective(0px) rotateY(0deg);

}

100% {

-webkit-transform-origin: 100% 40%;

-webkit-transform: perspective(600px) rotateY(-90deg);

}

}

@keyframes openRight {

0% {

transform-origin: 100% 40%;

transform: perspective(0px) rotateY(0deg);

}

100% {

transform-origin: 100% 40%;

transform: perspective(600px) rotateY(-90deg);

}

}

开

document.querySelector(".lock").οnclick=function(){

document.querySelector(".door-left").classList.add("openLeft");

document.querySelector(".door-right").classList.add("openRight");

this.style.opacity=0;

}