首先，先在中加入門 然后寫好大門的css，如下由于本人設(shè)計不好，所以這里的門都是用顏色塊代替的，大家在用的時候可以換成各種門的背景div margin0padding0 door width450pxheight450pxpositionrelat。

這只是個演示的demo，方法就是這樣，animationfillmode forwards這一句給你解釋下，這句就是當動畫完成時，動畫會停留在最后一幀其他代碼都比較簡單，不懂隨時問我希望能夠幫助到你，望采納。

曹鵬 CSS 視頻教程打包下載如果你感覺這個下載不快，可以自己搜索一下，很多的html 這個是曹鵬的網(wǎng)站 里面還有其他的視頻，在線的。

您可以使用 CSS 動畫來實現(xiàn)門打開后展示燈籠自上而下的動畫效果具體步驟如下1 在 HTML 中創(chuàng)建門和燈籠的元素，并給這些元素添加類名例如門燈籠 2 在 CSS 中為門添加打開的樣式例如，可以使用 transform 屬。

把文字和背景分別放到兩個平級的div中，文字覆蓋在背景的上面，然后只需要把動畫作用到背景所在的div上，這樣文字不受影響就可以保持不動了而且，這樣一來，外框與背景就不需要做反向運動，只需要背景動即可，外框保持不動。