首先，先在<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控制
转载于:https://www.cnblogs.com/lichun123/p/4987253.html
