Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren
So verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren
- php中世界最好的语言Original
- 2018-06-04 11:14:572663Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie Yuansheng CSS3 verwenden, um den Ringlade- Fortschrittsbalken zu realisieren. wie folgt Dies ist ein praktischer Fall, schauen wir ihn uns an.
Rendering:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
}
.circle{
box-sizing: border-box;
border:20px solid #ccc;
clip:rect(0,200px,200px,100px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid blue;
clip: rect(0,100px,200px,0);
}
.right{
border:20px solid blue;
clip: rect(0,200px,200px,100px);
}
.wth0{
width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<p class="wrap">
<p class="circle">
<p class="percent left"></p>
<p class="percent right wth0"></p>
</p>
<p class="num"><span>0</span>%</p>
</p>
</body>
<script>
var percent=0;
var loading=setInterval(function(){
if(percent>100){
percent=0;
$('.circle').removeClass('clip-auto');
$('.right').addClass('wth0');
}else if(percent>50){
$('.circle').addClass('clip-auto');
$('.right').removeClass('wth0');
}
$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
$('.num>span').text(percent);
percent++;
},200);
</script>
</html> Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!
Empfohlene Lektüre:
Zusammenfassung der grundlegenden JS-NutzungSo vermeiden Sie Funktionen und Browser-Rückschlüsse in JSDas obige ist der detaillierte Inhalt vonSo verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!