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

HTML

HTML+CSS+JS实现 ❤️制作loading动画效果❤️

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

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

🍅 作者主頁：Java李楊勇?

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

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

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

代碼目錄：

主要代碼實現：

CSS樣式：

.load1 .loader, .load1 .loader:before, .load1 .loader:after {background: #FFF;-webkit-animation: load1 1s infinite ease-in-out;animation: load1 1s infinite ease-in-out;width: 1em;height: 4em; }.load1 .loader:before, .load1 .loader:after {position: absolute;top: 0;content: ''; }.load1 .loader:before {left: -1.5em;-webkit-animation-delay: -0.32s;animation-delay: -0.32s; }.load1 .loader {text-indent: -9999em;margin: 8em auto;position: relative;font-size: 11px;-webkit-animation-delay: -0.16s;animation-delay: -0.16s; }.load1 .loader:after {left: 1.5em; }@-webkit-keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {box-shadow: 0 -2em #ffffff;height: 5em;} }@keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {box-shadow: 0 -2em #ffffff;height: 5em;} }

HTML代碼 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>單個元素實現的 CSS3 Loading 效果</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head><body><div class="inner"><link rel="stylesheet" href="css/load1.css"><div class="load-container load1"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load2.css"><div class="load-container load2"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load3.css"><div class="load-container load3"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load4.css"><div class="load-container load4"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load5.css"><div class="load-container load5"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load6.css"><div class="load-container load6"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load7.css"><div class="load-container load7"><div class="loader">Loading...</div></div><link rel="stylesheet" href="css/load8.css"><div class="load-container load8"><div class="loader">Loading...</div></div></div></body></html>

上面的圖片文件和js文件需要引入?

源碼獲取

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

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

精彩推薦更新中：

HTML5大作業實戰100套

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

總結

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

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

上一篇： java.lang.NoSuchFiel
下一篇：的run代码_小心使用 Task.Run