整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.說明：
推薦指數：★★★★
通俗易懂，小白一看就會，高手請飄過。
學python也是需要懂一點Html、Css、JavaScript的基礎知識的。
建議使用vscode編輯器。
2.效果圖1
3.代碼：保存為html，用瀏覽器打開即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進度條效果</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%是顯示百分數，動態顯示由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());
//通過計時器來顯示過渡的百分比進度
var temp = 0;
var timer = setInterval(function(){
calculate(temp);
//清除計時器結束該方法調用
if(temp == num){
clearInterval(timer);
}
temp++;
},30)
//改變頁面顯示百分比
function calculate(value){
//改變頁面顯示的值
$('.text').html(value + '%');
//清除上次調用該方法殘留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//當百分比小于等于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文件，放在同一個文件夾內。這是./的意思，也可以指定文件夾。
4.1 cirbar1.html的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進度條效果v2</title>
<!--如果是style type="text/css"這種直接在html中設置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，復制下去，保存，這樣子簡潔很多-->
<!--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());
//通過計時器來顯示過渡的百分比進度
var temp = 0;
var timer = setInterval(function(){
calculate(temp);
//清除計時器結束該方法調用
if(temp == num){
clearInterval(timer);
}
temp++;
},30)
//改變頁面顯示百分比
function calculate(value){
//改變頁面顯示的值
$('.text').html(value + '%');
//清除上次調用該方法殘留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//當百分比小于等于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文件的圓形進度條
順帶回顧一下相關知識。
==============================
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步---標題名稱-->
<title>圓形進度條v1</title>
<!--注意：./代表同一個文件夾下，也就是css和js文件與本html文件放在同一個文件夾下-->
<!--第2-1-3步---導入css文件-->
<link href="./cirbar.css" rel="stylesheet" />
</head>
<!--第2-2步---body部分-->
<body>
<!--第2-2-1步---定義畫布部分，注意沒有逗號隔開，大小設置-->
<canvas class="canvas" id="canvas" width="400" height="400"></canvas>
<!--第2-2-2步---導入js文件部分-->
<script src="./cirbar.js"></script>
<!--注意收尾-->
</body>
<!--注意收尾-->
</html>6.2 cirbar.css代碼：
.canvas {
/*畫布的背景顏色設置為：黑色*/
background:#303030;
}6.3 cirbar.js代碼：
window.onload = function () {
var canvas = document.getElementById('canvas'), //獲取canvas元素
context = canvas.getContext('2d'), //獲取畫圖環境，指明為2d
centerX = canvas.width / 2, //Canvas中心點x軸坐標
centerY = canvas.height / 2, //Canvas中心點y軸坐標
rad = Math.PI * 2 / 100, //將360度分成100份，那么每一份就是rad度
speed = 0.1; //加載的快慢就靠它了
//繪制紅色外圈
function blueCircle(n) {
context.save();
context.strokeStyle = " #1E90FF"; //隨百分數轉動的外圈的顏色為藍色
context.lineWidth = 3; //設置線寬
context.beginPath(); //路徑開始
//注意-為順時針，+為逆時針
//用于繪制圓弧context.arc(x坐標，y坐標，半徑，起始角度，終止角度，順時針/逆時針)
//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(); //路徑結束
context.restore();
}
//繪制白色外圈，初始的白色外圈
function whiteCircle() {
context.save();
context.beginPath();
// 下面百分數的字體顏色設置后上面的外圈的顏色竟然保持一樣
//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";//設置中間動態百分數的顏色
context.font = "25px Arial"; //設置字體大小和字體
context.textAlign = 'center';//字體水平居中
context.textBaseline = 'middle';//字體垂直居中
//繪制字體，并且指定位置
context.strokeText(n.toFixed(0) + "%", centerX, centerY);
context.stroke(); //執行繪制
context.restore();
}
//循環獲取
(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文件的區別了么？一個有：window.onload =，一個沒有，且只有$和小括號，因為外部的就是文件定義了一部分功能。
果圖
各位長友，大家上午好！
今天給各位帶來的是 CSS3 圓形星點旋轉大小變換動畫特效源碼
十分簡單且炫酷的一個特效！
大家可以按照自己的意愿 修改成喜歡的樣子！
若是有想文件版源碼的可以進HTML5前端技術交流 522323792
廢話不多說，上源碼！
html {
background: #111;
}
下是一個使用HTML和CSS實現綻放的煙花的示例代碼：
```html
<!DOCTYPE html>
<html>
<head>
<title>綻放的煙花</title>
<style>
.firework {
position: relative;
width: 100px;
height: 100px;
background-color: #ff0000;
border-radius: 50%;
animation: explode 1s ease-in-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>
```
這段代碼創建了一個`div`元素，并將其樣式設置為一個圓形的紅色煙花。使用CSS的動畫效果，通過`@keyframes`定義了一個名為`explode`的動畫，使煙花在1秒鐘內以縮放的方式產生綻放效果。動畫會無限循環播放，直到頁面關閉。
你可以將上述代碼保存為一個HTML文件，并在瀏覽器中打開，就能看到綻放的煙花效果了。希望你喜歡！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
