首先，先在中加入门 然后写好大门的css，如下由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景div margin0padding0 door width450pxheight450pxpositionrelat。

这只是个演示的demo，方法就是这样，animationfillmode forwards这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧其他代码都比较简单，不懂随时问我希望能够帮助到你，望采纳。

曹鹏 CSS 视频教程打包下载如果你感觉这个下载不快，可以自己搜索一下，很多的html 这个是曹鹏的网站 里面还有其他的视频，在线的。

您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果具体步骤如下1 在 HTML 中创建门和灯笼的元素，并给这些元素添加类名例如门灯笼 2 在 CSS 中为门添加打开的样式例如，可以使用 transform 属。

把文字和背景分别放到两个平级的div中，文字覆盖在背景的上面，然后只需要把动画作用到背景所在的div上，这样文字不受影响就可以保持不动了而且，这样一来，外框与背景就不需要做反向运动，只需要背景动即可，外框保持不动。