當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现燃烧的火焰火花动画特效

發布時間：2025/3/12 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现燃烧的火焰火花动画特效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

代碼目錄：

主要代碼實現：

部分CSS樣式：

body {display: grid;grid-template: 1fr 1fr 1fr/1fr 1fr 1fr;background: black;width: 100vw;height: 100vh;margin: 0;padding: 0; }.fire {position: relative;grid-column: 2/3;grid-row: 2/3;align-self: end;justify-self: center;width: 300px;height: 300px;background: #880e4f;border-radius: 50%;box-shadow: 0 0 50px 50px #880e4f;animation: background 5s ease infinite; }.flame {position: absolute;bottom: 70px;width: 100px;height: 100px;background-color: red;border-radius: 0 70%;box-shadow: -10px -10px 0 10px orange, -20px -20px 0 20px yellow;animation: flicker 5s ease infinite; }.f1 {left: 50px; }.f3 {transform: rotateZ(45deg);left: 100px;bottom: 100px; }.f2 {transform: rotateZ(90deg);left: 150px; }.log {position: absolute;bottom: 15px;left: 50px;width: 200px;height: 50px;background-color: brown;border-radius: 10px; }.l1 {transform: rotateZ(20deg);box-shadow: 0 0 10px #3e2723; }.l2 {transform: rotateZ(-20deg);box-shadow: 0 0 10px #3e2723; }.l3 {transform: rotate3d(1, 1, 1, 40deg); }.l4 {transform: rotate3d(1, 1, 1, -40deg); }.spark {width: 5px;height: 5px;background-color: orangered;border-radius: 50%;box-shadow: 0 0 5px 3px orange;position: absolute;top: 150px;left: 150px;opacity: 0; }

HTML代碼 :

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Sparks Float Up From A Blazing Fire </title><link rel="stylesheet" href="css/style.css"></head><body><div class="fire"><div class="logs"><div class="log l1"></div><div class="log l2"></div></div><div class="flames"><div class="flame f1"></div><div class="flame f2"></div><div class="flame f3"></div></div><div class="sparks"><div class="spark s1"></div><div class="spark s2"></div><div class="spark s3"></div><div class="spark s4"></div><div class="spark s5"></div><div class="spark s6"></div><div class="spark s7"></div><div class="spark s8"></div></div></div></body></html>

源碼獲取

大家可以點贊、收藏、關注、評論我啦、查看下方微信公眾號獲取~！

打卡文章更新?65?/? 100天

精彩推薦更新中：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

web前端期末大作業網頁實戰《100套》

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现燃烧的火焰火花动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于java Springboot实现课
下一篇： java参数校验:ValidatorUt