您可以使用 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')
})
希望这些信息能帮助到您！
主要思路是利用hover来进行功能实现，transition-duration:来实现过度动画；
css这样实现
html如下
.download-block{
width:90%
height:100px
background:#0b0e32
/*margin: 100px auto 0*/
margin:0 auto
position:absolute
left:0
right:0
transition-duration:2s
opacity:0.7
}
.download-block1{
background:transparent
height:100px
overflow:hidden
position:relative
left:0
top:-100px
right:0
padding-top:100px
transition-duration:2s
opacity:0.7
cursor:pointer
}
.download-block1:hover{
padding-top:0
transition-duration:2s
opacity:0.7
}
你是css3吗？可以用writing-mode: tb-rl例子：
<html>
<head>
<style type="text/css">
div.one
{
height:300px
writing-mode: tb-rl
}
</style>
</head>
<body>
<div class="one">Some text. Right-to-left direction111111111111.</div>
</body>
</html>
