<!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- 320px;overflow: hidden;}.bg{position: relative;100%;height: 100%;background: #fff;}.door{position: absolute;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%;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;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").onclick=function(){document.querySelector(".door-left").classList.add("openLeft");document.querySelector(".door-right").classList.add("openRight");this.style.opacity=0;}</script></body></html>
演示地址： 开门