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

HTML

HTML+CSS+JS实现 ❤️发光糖果泡泡动画特效❤️

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

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

🍅 作者主頁：Java李楊勇?

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

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

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

?代碼目錄：

主要代碼實現：

CSS樣式：

body {background-image: linear-gradient( to bottom right, #91defe, #99c0f9, #bdb6ec, #d7b3e3, #efb3d5, #f9bccc);display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;overflow: hidden; }.ball {animation: float 3.5s ease-in-out infinite;height: 200px;width: 200px;border-radius: 50%;position: relative;background: radial-gradient( circle at 75% 30%, white 5px, aqua 8%, darkblue 60%, aqua 100%);box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc, inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea, inset 0 50px 140px #fde9ea, 0 0 90px #fff; }@keyframes float {0% {transform: translatey(0px);}50% {transform: translatey(-80px);}100% {transform: translatey(0px);} }.shadow {background: #b490b2;width: 150px;height: 40px;top: 70%;animation: expand 4s infinite;position: absolute;border-radius: 50%; }@keyframes expand {0%,100% {transform: scale(0.5);}50% {transform: scale(1);} }@media only screen and (max-width: 500px) {.ball {animation: float 4.5s ease-in-out infinite;height: 120px;width: 120px;background: radial-gradient( circle at 65% 35%, white 5px, aqua 15%, darkblue 50%, aqua 100%);box-shadow: inset 0 -20px 30px #fff, inset 40px 0 46px #eaf5fc, inset 58px 0px 60px #c2d8fe, inset -8px -30px 100px #fde9ea, inset 0 20px 110px #fde9ea, 0 0 90px #fff;}.shadow {width: 90px;height: 20px;top: 78%;animation: expand 5s infinite;}@keyframes float {0% {transform: translatey(0px);}50% {transform: translatey(-50px);}100% {transform: translatey(0px);}} }

HTML代碼 :

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>發光糖果泡泡動畫特效</title><link rel="stylesheet" href="css/style.css"></head><body><div class="ball"></div><div class="shadow"></div></body></html>

源碼獲取

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

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

精彩推薦更新中：

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

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️发光糖果泡泡动画特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： HTML+CSS+JS实现 ❤️基于Ja
下一篇：基于Java+SpringBoot+vu