CSS3实现开门动画

最新推荐文章于 2024-08-07 11:12:19 发布

weixin_30398227

最新推荐文章于 2024-08-07 11:12:19 发布

阅读量660

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/raoyunxiao/p/4761678.html

版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

<title></title>

<style>

*{

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);

}

}

</style>

</head>

<body>

<div class="bg">

<section>

<div class="door door-left"></div>

<div class="door door-right"></div>

<div class="lock">开</div>

</section>

<section class="page2">

</section>

</div>

<script>

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

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

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

this.style.opacity=0;

}

</script>

</body>

</html>