整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
果圖
在渲染頁面的過程中，進(jìn)度條是我們最為常見的，有條形進(jìn)度條，圓環(huán)進(jìn)度條，圓形進(jìn)度條。今天，我們就來實現(xiàn)一下圓形進(jìn)度條。
用到的知識點：
首先，我們創(chuàng)建一個box，作為父級容器，定寬定高（160px），定位（position：relative）;
.box{
width: 160px;
height: 160px;
margin: 200px auto;
position: relative;
}
圓形進(jìn)度條，分為左右兩部分，利用時間差，通過動畫關(guān)鍵幀來達(dá)到進(jìn)度效果。
接下來，我們首先實現(xiàn)左側(cè)部分，創(chuàng)建一個div，類名為left-box，定寬定高（80px，160px）；定位（position：absolute）；
在left-box下創(chuàng)建一個div為子元素，類名為left-tran 和 left。接下來，設(shè)置left-tran樣式。
我們要明白，進(jìn)度條的實現(xiàn)是通過時間差，改變邊框的顏色。通俗一點：就是一個div，width和height都為0px；邊框?qū)挾仍O(shè)為100%；然后top和left為一組，bottom和right為一組，分別設(shè)置不同的顏色。效果如下圖：
接下來。將父級設(shè)置overflow：hidden。超出部分隱藏。這樣就只顯示一半的邊框，隨后便利用transform：rotate旋轉(zhuǎn)45deg，邊框邊圓角得到最終效果，如下圖：
最后設(shè)置關(guān)鍵幀，不同的邊框顏色就會相互轉(zhuǎn)變
這樣。左側(cè)的樣式就已經(jīng)完成，右側(cè)的與之相似，這里，我們就不在這里多加描述。
待完成右側(cè)樣式，兩個關(guān)鍵幀動畫相互協(xié)調(diào)，就可以完成一個圓形進(jìn)度條啦。
今天的全部代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
box-sizing: border-box;
}
.left-box{
width: 100px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
overflow: hidden;
}
.left-tran{
width: 0px;
height: 0px;
border: 100px solid;
box-sizing: border-box;
transform: rotate(45deg);
border-radius: 50%;
}
.left{
border-left: 100px solid #e3e4e5;
border-bottom: 100px solid #e3e4e5;
animation: leftmove 10s linear infinite;
}
@keyframes leftmove{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(45deg);
}
100%{
transform: rotate(225deg);
}
}
.right-box{
width: 100px;
height: 200px;
position: absolute;
top: 0px;
right: 0px;
box-sizing: border-box;
overflow: hidden;
}
.right-tran{
width: 0px;
height: 0px;
border: 100px solid;
position: absolute;
top: 0px;
right: 0px;
transform: rotate(45deg);
border-radius: 50%;
}
.right{
border-right: 100px solid #e3e4e5;
border-top: 100px solid #e3e4e5;
animation: rightmove 10s linear infinite;
}
@keyframes rightmove{
0%{
transform: rotate(45deg);
}
50%{
transform: rotate(225deg);
}
100%{
transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="left-box">
<div class="left-tran left"></div>
</div>
<div class="right-box">
<div class="right-tran right"></div>
</div>
</div>
</body>
</html>
進(jìn)度條，結(jié)合和時間戳，就可以很好的完成一個完美的時間進(jìn)度條了。
希望今天的知識點對大家有所幫助。
.說明：
推薦指數(shù)：★★★★
通俗易懂，小白一看就會，高手請飄過。
學(xué)python也是需要懂一點Html、Css、JavaScript的基礎(chǔ)知識的。
建議使用vscode編輯器。
2.效果圖1
3.代碼：保存為html，用瀏覽器打開即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進(jìn)度條效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
border-radius: 100%;
background: #ccc;
position: relative;
margin: 20px auto;
}
.circle-right, .circle-left, .mask-right, .mask-left{
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
}
.circle-right, .circle-left{
background: skyblue;
}
.mask-right, .mask-left{
background: #ccc;
}
.circle-right, .mask-right{
clip: rect(0,200px,200px,100px);
}
.circle-left, .mask-left{
clip: rect(0,100px,200px,0);
}
.text{
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 34px;
color: deepskyblue;
border-radius: 100%;
background: #fff;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="bg">
<div class="circle-right"></div>
<!--100%是顯示百分?jǐn)?shù)，動態(tài)顯示由0~100-->
<div class="text">100%</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//獲取百分比值
var num=parseInt($('.text').html());
//通過計時器來顯示過渡的百分比進(jìn)度
var temp=0;
var timer=setInterval(function(){
calculate(temp);
//清除計時器結(jié)束該方法調(diào)用
if(temp==num){
clearInterval(timer);
}
temp++;
},30)
//改變頁面顯示百分比
function calculate(value){
//改變頁面顯示的值
$('.text').html(value + '%');
//清除上次調(diào)用該方法殘留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//當(dāng)百分比小于等于50
if(value <=50){
var html='';
html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
//元素里添加子元素
$('.circle-right').append(html);
}else{
value -=50;
var html='';
html +='<div class="circle-left">';
html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
html +='</div>';
//元素后添加元素
$('.circle-right').after(html);
}
}
})
</script>
</body>
</html>4.拆分法：把一個含有css和js（JavaScript）的html，拆掉三個文件，一個叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一個文件夾內(nèi)。這是./的意思，也可以指定文件夾。
4.1 cirbar1.html的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進(jìn)度條效果v2</title>
<!--如果是style type="text/css"這種直接在html中設(shè)置css，注意起始是*，不是點-->
<!--style type="text/css"-->
<link href="./cirbar1.css" rel="stylesheet" />
</head>
<body>
<div class="bg">
<div class="circle-right"></div>
<div class="text">100%</div>
</div>
<!--這個外部js文件=jquery.min.js，不能少，否則不能動了-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
<!--同樣的，把寫在html的js，新建一個cirbar1.js，復(fù)制下去，保存，這樣子簡潔很多-->
<!--script type="text/javascript"-->
<script src="./cirbar1.js"></script>
</body>
</html>4.2 cirbar1.css的代碼：
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
border-radius: 100%;
background: #ccc;
position: relative;
margin: 20px auto;
}
.circle-right, .circle-left, .mask-right, .mask-left{
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
}
.circle-right, .circle-left{
background: skyblue;
}
.mask-right, .mask-left{
background: #ccc;
}
.circle-right, .mask-right{
clip: rect(0,200px,200px,100px);
}
.circle-left, .mask-left{
clip: rect(0,100px,200px,0);
}
.text{
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 34px;
color: deepskyblue;
border-radius: 100%;
background: #fff;
position: absolute;
top: 20px;
left: 20px;
}4.3 cirbar1.js的代碼：
$(function(){
//獲取百分比值
var num=parseInt($('.text').html());
//通過計時器來顯示過渡的百分比進(jìn)度
var temp=0;
var timer=setInterval(function(){
calculate(temp);
//清除計時器結(jié)束該方法調(diào)用
if(temp==num){
clearInterval(timer);
}
temp++;
},30)
//改變頁面顯示百分比
function calculate(value){
//改變頁面顯示的值
$('.text').html(value + '%');
//清除上次調(diào)用該方法殘留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//當(dāng)百分比小于等于50
if(value <=50){
var html='';
html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
//元素里添加子元素
$('.circle-right').append(html);
}else{
value -=50;
var html='';
html +='<div class="circle-left">';
html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
html +='</div>';
//元素后添加元素
$('.circle-right').after(html);
}
}
})==============================
再來一個，不用外部js文件的圓形進(jìn)度條
順帶回顧一下相關(guān)知識。
==============================
5.效果圖
6.三個文件，放在同一個文件夾中
6.1 cirbar.html代碼：
<!--第1步---聲明html5-->
<!DOCTYPE html>
<!--第2步---html大框架-->
<html lang="en">
<!--第2-1步---head部分-->
<head>
<!--第2-1-1步---meta部分：聲明字符編碼格式：utf-8-->
<!--注意與python的第一行聲明一樣：# -*- coding: utf-8 -*-->
<meta charset="utf-8" />
<!--第2-1-2步---標(biāo)題名稱-->
<title>圓形進(jìn)度條v1</title>
<!--注意：./代表同一個文件夾下，也就是css和js文件與本html文件放在同一個文件夾下-->
<!--第2-1-3步---導(dǎo)入css文件-->
<link href="./cirbar.css" rel="stylesheet" />
</head>
<!--第2-2步---body部分-->
<body>
<!--第2-2-1步---定義畫布部分，注意沒有逗號隔開，大小設(shè)置-->
<canvas class="canvas" id="canvas" width="400" height="400"></canvas>
<!--第2-2-2步---導(dǎo)入js文件部分-->
<script src="./cirbar.js"></script>
<!--注意收尾-->
</body>
<!--注意收尾-->
</html>6.2 cirbar.css代碼：
.canvas {
/*畫布的背景顏色設(shè)置為：黑色*/
background:#303030;
}6.3 cirbar.js代碼：
window.onload=function () {
var canvas=document.getElementById('canvas'), //獲取canvas元素
context=canvas.getContext('2d'), //獲取畫圖環(huán)境，指明為2d
centerX=canvas.width / 2, //Canvas中心點x軸坐標(biāo)
centerY=canvas.height / 2, //Canvas中心點y軸坐標(biāo)
rad=Math.PI * 2 / 100, //將360度分成100份，那么每一份就是rad度
speed=0.1; //加載的快慢就靠它了
//繪制紅色外圈
function blueCircle(n) {
context.save();
context.strokeStyle=" #1E90FF"; //隨百分?jǐn)?shù)轉(zhuǎn)動的外圈的顏色為藍(lán)色
context.lineWidth=3; //設(shè)置線寬
context.beginPath(); //路徑開始
//注意-為順時針，+為逆時針
//用于繪制圓弧context.arc(x坐標(biāo)，y坐標(biāo)，半徑，起始角度，終止角度，順時針/逆時針)
//context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);
context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);
context.stroke(); //繪制
context.closePath(); //路徑結(jié)束
context.restore();
}
//繪制白色外圈，初始的白色外圈
function whiteCircle() {
context.save();
context.beginPath();
// 下面百分?jǐn)?shù)的字體顏色設(shè)置后上面的外圈的顏色竟然保持一樣
//context.strokeStyle="#F8F8FF";
context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字繪制
function text(n) {
context.save(); //save和restore可以保證樣式屬性只運用于該段canvas元素
context.strokeStyle="#7FFF00";//設(shè)置中間動態(tài)百分?jǐn)?shù)的顏色
context.font="25px Arial"; //設(shè)置字體大小和字體
context.textAlign='center';//字體水平居中
context.textBaseline='middle';//字體垂直居中
//繪制字體，并且指定位置
context.strokeText(n.toFixed(0) + "%", centerX, centerY);
context.stroke(); //執(zhí)行繪制
context.restore();
}
//循環(huán)獲取
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if (speed < 100) {
//1可從后臺獲取值,也是從0~100，step為1，代表速度
speed +=1;
}
}());
}注意到6.3js文件與4.3js文件的區(qū)別了么？一個有：window.onload=，一個沒有，且只有$和小括號，因為外部的就是文件定義了一部分功能。
是Web開發(fā)和CSS的新手嗎？你是否想過如何在互聯(lián)網(wǎng)上看到那些漂亮的形狀？別再奇怪了。你來對地方了。
下面，我將解釋使用CSS創(chuàng)建形狀的基本知識。還有很多要告訴你關(guān)于這個話題！因此，我不會涵蓋所有（絕大部分）工具和形狀，但這應(yīng)該使你基本了解如何使用CSS創(chuàng)建形狀，并且創(chuàng)建文字環(huán)繞圖形的方式方法。
有些形狀比其他形狀需要更多的“技巧和竅門”。使用CSS創(chuàng)建形狀通常是使用寬度，高度，頂部，右側(cè)，左側(cè)，邊框，底部，變換和偽元素（例如：before和：after）的組合。我們還具有更現(xiàn)代的CSS屬性，可使用諸如shape-outside和clip-path之類的形狀來創(chuàng)建形狀，這些內(nèi)容我將在后面寫出來。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
