HTML+CSS+JS实现燃烧的火焰火花动画特效
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现燃烧的火焰火花动画特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🍅 作者主頁：Java李楊勇?
🍅 簡介：Java領域優(yōu)質創(chuàng)作者🏆、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大作業(yè)實戰(zhàn)案例《100套》
Java畢設項目精品實戰(zhàn)案例《100套》
web前端期末大作業(yè)網頁實戰(zhàn)《100套》
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现燃烧的火焰火花动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于java Springboot实现课
- 下一篇： HTML+CSS+JS实现 ❤️个人相册