CSS動態(tài)條形加載條效果的示例代碼
發(fā)布時間：2020-08-07 15:23:28 作者：Army-海軍 
我要評論
我要評論這篇文章主要介紹了CSS動態(tài)條形加載條效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
運用了css變量的知識，直接上代碼及其我加的注釋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>展示一個css動態(tài)條形加載條</title>
<style>
/* 使用CSS變量 */
.flex {
display: flex;
list-style: none;
/* 設定li元素橫向排列 */
}
.loading {
width: 200px;
height: 200px;
}
.loading>li {
/* 我們在每一個li元素的行內元素都定義了一個css變量 --line-index大小不同 */
/* 此時定一個動畫延遲的變量--time 經(jīng)過計算calc */
--time: calc((var(--line-index) - 1) * 200ms);
border-radius: 3px;
width: 6px;
height: 30px;
background-color: #f66;
/* 動畫都是一個動畫,但是開始的時間不同,就顯示出這樣的效果了 */
animation: beat 1.5s ease-in-out var(--time) infinite;
}
.loading>li+li {
margin-left: 5px;
}
@keyframes beat {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
}
</style>
</head>
<body>
<ul class="loading flex">
<li style="--line-index: 1;"></li>
<li style="--line-index: 2;"></li>
<li style="--line-index: 3;"></li>
<li style="--line-index: 4;"></li>
<li style="--line-index: 5;"></li>
<li style="--line-index: 6;"></li>
</ul>
</body>
</html>
看效果
到此這篇關于CSS動態(tài)條形加載條源碼的文章就介紹到這了,更多相關css動態(tài)條形加載條內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了CSS心形加載的動畫源碼的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-08-10
這篇文章主要介紹了實現(xiàn)點擊按鈕后CSS加載效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-05-09
可能大家都知道，js執(zhí)行會阻塞DOM樹的解析和渲染，那么css加載會阻塞DOM樹的解析和渲染嗎？下面就跟隨小編一起來了解一下2019-02-13- 這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問題思路解析，文中還給大家補充介紹了關于html，css，js三者的加載順序問題，需要的朋友參考下吧2017-12-25
基于CSS制作創(chuàng)意端午節(jié)專屬加載特效
本文給大家分享的是一個css創(chuàng)意特效端午加載動畫，想法是讓粽葉，糯米，紅棗繞圓旋轉，然后聚集起來融合后變成一個可愛的小粽子的效果，對css加載特效實現(xiàn)代碼感興趣的朋友2022-05-31
