<div class="leftDoor"></div>
<div class="rightDoor"></div>
2然后写好大门的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)
}
.door .rightDoor{
right:0
border-left:1px solid #999
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)
}
}
}
@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%
}
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控制
您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下：
1. 在 HTML 中创建门和灯笼的元素，并给这些元素添加类名。例如：
<div class="door">门</div>
<div class="lantern">灯笼</div>
2. 在 CSS 中为门添加打开的样式。例如，可以使用 transform 属性来旋转门：
.door {
transform: rotate(90deg)
}
3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如，可以使用以下样式来使灯笼从上方移动到下方：
.lantern {
animation: moveDown 1s ease-in-out
}
@keyframes moveDown {
from {
top: -100px
}
to {
top: 100px
}
}
4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法，来添加动画类名，从而触发动画的播放。
例如：
document.querySelector('.door').addEventListener('click', function() {
document.querySelector('.lantern').classList.add('lantern-animation')
})
希望这些信息能帮助到您！
方法/步骤首先，先在<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控制
