|
全世界只有不到1 % 的人關(guān)注了 啦啦啦好想biu點什么 
- 2021.05.30 - 在本文中，我將向您展示如何僅使用HTML,、CSS和Boostrap框架創(chuàng)建圓形的動畫進度條。之前，我已經(jīng)設(shè)計了更多類型的動畫進度條,，但是這種設(shè)計是采用完全現(xiàn)代的方式設(shè)計的。 動畫圓形進度欄是一種統(tǒng)計設(shè)計,，可用于各種網(wǎng)站,。它主要用于指示個人在投資組合網(wǎng)站或個人網(wǎng)站中所占資格的百分比,。它是完全動畫的,，也就是說，在正常情況下,，它的百分比為零，然后它將逐漸達到預(yù)定百分比,。已使用不同的顏色表示百分比,。 使用HTML和CSS的圓形動畫進度條 我使用了Html，CSS和bootstrap框架來實現(xiàn)它,。對于此圓形進度條，您可以根據(jù)需要預(yù)先確定百分比,。這意味著您可以預(yù)先確定此動畫將停止的進度百分比。在這種情況下,，我基本上圈出了三個進度標志,，并為每個標志使用了不同的顏色。 該圓形進度條為您呈現(xiàn)一個美麗和視覺沖擊力的方式來展示一個統(tǒng)計,。在此程序中，網(wǎng)頁上的三個條形具有不同的百分比,，刷新頁面時,，圓形圖將填充到基于百分比的位置,。這些進度條可完全響應(yīng)平板電腦,，手機等任何設(shè)備,。 
下面，我將逐步詳細顯示如何創(chuàng)建此進度條,，以及用于創(chuàng)建任何元素的編程代碼,。文章下方是下載方式,，您可以在其中下載本文所需的源代碼。步驟1：創(chuàng)建進度欄的結(jié)構(gòu)??????????????????? <!--Bootstrap Cdn link-->
<link rel="stylesheet" href="https://cdn./npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">75%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress pink">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">60%</div>
</div>
</div>
</div>
</div>
body{
background-color: #333;
margin: 10%;
margin-left: 30%;
}
.progress{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 15px solid #f2f5f5;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 15px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 100%;
height: 100%;
font-size: 24px;
color: rgb(250, 245, 245);
text-align: center;
position: absolute;
}
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
@keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
@keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
此時動畫已經(jīng)開始工作了但是我們看不見,，因為它們的顏色都是白色的,。 步?????????????????????????????驟4：添加其他顏色以使加載動畫更清晰 .progress.blue .progress-bar{
border-color: #26abfd;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdc426;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #f83754;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
希望你從本文中學(xué)到了如何做到這一點,。如果有任何困難，可以通過評論讓我知道,。
https://download.csdn.net/download/qq_44273429/19060510
|
