溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么CSS實現加載功能”，在日常操作中，相信很多人在怎么CSS實現加載功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么CSS實現加載功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
為什么要做加載
只想說, 本文最重要的是對 CSS, 偽元素, keyframe的分享, 以及讀者對這些東西的真正掌握, 我并不是慫恿大家在每一個頁面的前面都去加一個酷炫的加載
我是如何做的
不同的頁面, 對加載的設計也就可能不同. 本文設計的加載適合大多數頁面.
并且, 本文假設讀者已經非常熟悉偽元素, CSS 動畫屬性和keyframe, 如果讀者想重溫, 下面兩篇文章可做參考
學會使用 CSS 中的 :after 和 :before
keyframe 動畫直通車
開始入門
在開始一起構建它前, 我們先看看它***的效果
正如你所看到的, 我們將經歷 4 個步驟
邊框一個接一個地出現
紅/橙/白色方塊向里滑入
方塊向外劃出
邊框消失
我們只需要 animation-direction: alternate 來完成步驟 1 和 2, 步驟 3 和 步驟 4 我們可以使用 reverse, 另外, 我們可以使用 animation-iteration-count: infinite 重復動畫
首先, 我們先書寫好基本的 HTML 結構
<!doctype html> <html> <head> <!-- <link rel="preload"> for CSS, JS, and font files --> <style type="text/css"> /* * All the CSS for the loader * Minified and vendor prefixed */ </style> </head> <body> <div class="loader"> <!-- HTML for the loader --> </div> <header /> <main /> <footer /> <!-- Tags for CSS and JS files --> </body> </html>
構建 logo 本身
一開始我們先實現 logo 本身, 而不是最終版本的效果
父級元素 logo, 不同顏色的方塊都是它的子元素
<div class="logo"> <div class="white"></div> <div class="orange"></div> <div class="red"></div> </div>
我們用 less 來實現
.logo { position: relative; width: 100px; height: 100px; border: 4px solid black; box-sizing: border-box; background-color: white; & > div { position: absolute; } .red { top: 0; bottom: 0; left: 0; width: 27%; border-right: 4px solid black; background-color: #EA5664; } /* Similar code for div.orange and div.white */ }logo 的效果圖如下
邊框動畫
接下來, 我們將進入棘手(有趣)的部分
CSS 不允許我們直接對 div.logo 的邊框進行設置達到我們想要的效果, 所以我們必須去除原有的邊框, 采用其他的辦法來實現
我們要把四個邊框分割開來, 然后讓它們有序地出現, 所以, 我們可以使用覆蓋整個 div 的兩個透明的偽元素
廢話少說, 就讓我們開始吧, 我們先做出它最初始的樣子. 我們讓 div.logo :: before 絕對位于 div.logo 的左上角，代表方塊的上邊框和右邊框
, 讓 div.logo::after 絕對定位 div.logo 的右下角, 代表方塊的下邊框和左邊框
現在, less 代碼變成了這樣
.logo { position: relative; width: 100px; height: 100px; box-sizing: border-box; background-color: white; &::before, &::after { content: ''; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: 4px solid transparent; } &::before { top: 0; left: 0; border-top-color: black; border-right-color: black; } &::after { bottom: 0; right: 0; border-bottom-color: red; // Red for demo purposes only border-left-color: red; } }現在效果長這樣
接下來, 我們就用 keyframe 做 div.logo::before 的***個動畫
我們將 width 和 height 初始都為 0, 然后用 keyframe 將 width 和
height 調整到 100%
隨著我們在相應的時間把邊框從透明變為黑色, 我們想要的最開始的效果就出來了
該代碼展示了偽元素的初始動畫
div.logo { &::before, &::after { /* ... */ animation-timing-function: linear; } &::before { /* ... */ animation: border-before 1.5s infinite; animation-direction: alternate; } } @keyframes border-before { 0% { width: 0; height: 0; border-right-color: transparent; } 24.99% { border-right-color: transparent; } 25% { height: 0; width: 100%; border-right-color: black; } 50%, 100% { width: 100%; height: 100%; } }我們對 div.logo::after 重復相同的操作, 不要忘了調整時間和反轉 width 和 height. 現在, 我們就有了最外層邊框的整個動畫.
方塊動畫
***，我們一起來設置方塊的動畫
我們***的挑戰是無法連接 keyframes。因為，我們最終想要的動畫中每個小方框都有一定的順序， 為此， 我們作如下改變
0 to 25%：上邊框和右邊框顯現
25 to 50%：下邊框和左邊框顯現
50 to 65%：紅色小方塊顯現
65 to 80%：橙色小方塊顯現
75 to 90%：白色小方塊顯現
紅色小方框 keyframe 如下
@keyframes red { 0%, 50% { width: 0; opacity: 0; } 50.01% { opacity: 1; } 65%, 100% { width: 27%; opacity: 1; } }重復上面的代碼，就可完成我們整個動畫， 是不是很***
到此，關于“怎么CSS實現加載功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
