HTML幽靈動畫是指在網頁中使用HTML和CSS代碼制作的模擬鬼魂飄動的動畫效果。這種動畫效果可以讓網站更具有視覺沖擊力和吸引力,常常被用于萬圣節主題、恐怖故事等相關場景。
/*HTML幽靈動畫代碼*/ @keyframes ghost { 0% { top: 50%; opacity: 0; } 20% { opacity: 1; } 100% { top: 0; opacity: 0; } } .ghost { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 150px; background-color: #ffffff; border-radius: 60px 60px 0 0; } .ghost:before { content: ""; position: absolute; top: -25px; left: -10px; width: 120px; height: 120px; border-radius: 50%; background-color: #ffffff; opacity: 0.7; } .ghost:after { content: ""; position: absolute; top: 10px; left: 20px; width: 20px; height: 20px; border-radius: 50%; background-color: #000000; } .ghost .eyes { width: 30px; height: 30px; border-radius: 50%; background-color: #000000; position: absolute; top: 25%; left: calc(50% - 15px); } .ghost .eyes:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #ffffff; position: absolute; top: 40%; left: 20%; } .ghost .eyes:after { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #ffffff; position: absolute; top: 40%; right: 20%; } .ghost { animation: ghost 5s infinite linear; }
以上代碼是一個簡單的HTML幽靈動畫的實現代碼。其中,通過使用@keyframes屬性來定義幽靈的運動軌跡,通過設置元素的opacity屬性來實現幽靈出現和消失的效果。通過使用CSS中的偽元素before和after,我們為幽靈的頭部和眼睛添加樣式。最后,在元素上添加動畫屬性animation,指定幽靈動畫的時間長度和動畫軌跡。這樣就可以實現一個簡單而有趣的幽靈動畫效果。
上一篇python 趙中位數