溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了CSS怎么動態條形加載條效果，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“CSS怎么動態條形加載條效果”這篇文章吧。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>展示一個css動態條形加載條</title>
<style>
/* 使用CSS變量 */
.flex {
display: flex;
list-style: none;
/* 設定li元素橫向排列 */
}
.loading {
width: 200px;
height: 200px;
}
.loading>li {
/* 我們在每一個li元素的行內元素都定義了一個css變量 --line-index大小不同 */
/* 此時定一個動畫延遲的變量--time 經過計算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怎么動態條形加載條效果”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
