以下是一个简单的例子，假设你有一个类名为door的HTML元素，希望实现上下移动效果：
Copy code.door { transform: translateY(-100px) transition: transform 1s
}.door.open { transform: translateY(0)
}
在上面的CSS代码中，我们使用了transform属性的translateY方法来实现垂直移动，并使用了transition属性来设置动画过渡效果。我们还定义了一个类名为open的状态，在这个状态下，门的位置会发生改变，从而实现上下移动的效果。
要在HTML代码中触发这个状态，你可以使用JavaScript来添加或删除open类名：
Copy codedocument.querySelector('.door').classList.add('open')document.querySelector('.door').classList.remove('open')
希望这些信息能帮助你实现所需的上下门移动效果。
方法/步骤首先，先在<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控制
1首先，先在<body></body>中加入门<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控制
