CSS3實現彩色進度條動畫的示例
發(fā)布時間：2020-10-29 16:40:55 作者：大神神碼 
我要評論
我要評論這篇文章主要介紹了CSS3實現彩色進度條動畫的示例，幫助大家更好的制作CSS特效，美化自身網頁，感興趣的朋友可以了解下
簡要教程
這是一款css3彩色進度條動畫特效。該CSS3進度條動畫特效中包含了三種動畫特效，它們通過HMTL代碼和簡單的CSS3來實現彩色進度條的不同動畫效果。
使用方法
HTML結構
<div class="container">
<div class="progress progress-striped">
<div class="progress-bar">
</div>
</div>
</div>
<div class="container">
<div class="progress2 progress-moved">
<div class="progress-bar2" >
</div>
</div>
</div>
<div class="container">
<div class="progress progress-infinite">
<div class="progress-bar3" >
</div>
</div>
</div>
CSS結構
body {
font-family: 'Montserrat', sans-serif;
background: #2c303a;
}
.container {
margin: 100px auto;
width: 500px;
text-align: center;
}
.progress {
padding: 6px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
height: 18px;
background-color: #ee303c;
border-radius: 4px;
transition: 0.4s linear;
transition-property: width, background-color;
}
.progress-striped .progress-bar {
background-color: #FCBC51;
width: 100%;
background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
animation: progressAnimationStrike 6s;
}
@keyframes progressAnimationStrike {
from {
width: 0;
}
to {
width: 100%;
}
}
.progress2 {
padding: 6px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar2 {
height: 18px;
border-radius: 30px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
transition: 0.4s linear;
transition-property: width, background-color;
}
.progress-moved .progress-bar2 {
width: 85%;
background-color: #EF476F;
animation: progressAnimation 6s;
}
@keyframes progressAnimation {
0% {
width: 5%;
background-color: #F9BCCA;
}
100% {
width: 85%;
background-color: #EF476F;
}
}
.progress-bar3 {
height: 18px;
border-radius: 4px;
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
transition: 0.4s linear;
transition-property: width, background-color;
}
.progress-infinite .progress-bar3 {
width: 100%;
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
animation: colorAnimation 1s infinite;
}
@keyframes colorAnimation {
0% {
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
}
20% {
background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
}
40% {
background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
}
60% {
background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
}
100% {
background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
}
}
以上就是CSS3實現彩色進度條動畫的示例的詳細內容，更多關于CSS3 彩色進度條的資料請關注腳本之家其它相關文章！
相關文章
css3 keyframes制作創(chuàng)意有趣的進度條漸變加載動畫，loading進度條動畫特效，非常不錯，喜歡的朋友快來下載吧2020-10-21
jQuery+CSS3實現的雙層圓環(huán)形進度條加載動畫特效
是一段基于jQuery+CSS3實現的雙層圓環(huán)形狀進度條加載動畫特效，雙層圓環(huán)中心還包含著數字百分比顯示，非常不錯，適應于所有網頁使用，歡迎興趣的朋友前來下載2020-08-17
這篇文章主要介紹了利用css3實現進度條效果及動態(tài)添加百分比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-06-01
是一段基于CSS3實現的背景屬性繪制漸變的進度條加載動畫特效，自帶有百分比加載動畫效果，非常有意思，歡迎有興趣的朋友前來下載使用2019-10-09
這是一款基于CSS3+SVG實現S形進度條加載動畫效果源碼。畫面中一個類似蛇形管道的S形狀進度條呈現出從左上方0%進度加載過渡到100%的進度。并如此循環(huán)往復2018-07-09
這篇文章主要介紹了使用CSS3實現環(huán)形進度條效果,需要的朋友可以參考下2018-06-01
jQuery基于css3屬性制作紅色的簡易的下載按鈕，用戶點擊download切換顯示進度條加載動畫，下載完成提示效果。有需要的朋友可以直接下載使用2018-04-04
這篇文章主要介紹了css3 clip實現圓環(huán)進度條的示例代碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-07
這篇文章主要介紹了css 進度條的文字根據進度漸變的示例代碼，介紹了進度條里面的文字需要根據進度的長度而變化，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一2018-01-09
這是一個基于Bootstrap的純CSS3進度條動畫樣式特效。具有陰影立體效果， 通過animation來制作，歡迎下載2017-10-23
