<!DOCTYPE html>
<html lang="en">
<head>
<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>SVG实现圆形进度条</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '微软雅黑', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #000;
}
.box {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 60px;
flex-direction: column;
background: linear-gradient(to right, rgba(35, 35, 35, 0.2), #1e1d1e);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.box .percent {
position: relative;
width: 150px;
height: 150px;
}
.box .percent svg {
position: relative;
width: 150px;
height: 150px;
}
.box .percent svg circle {
width: 150px;
height: 150px;
fill: none;
stroke-width: 10;
stroke: #000;
transform: translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
stroke-linecap: round;
}
.box:nth-child(1) .percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #000
}
.box:nth-child(1) .percent svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 87)/100);
stroke: #00fe41;
}
.box:nth-child(2) .percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #000
}
.box:nth-child(2) .percent svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 85)/100);
stroke: #079eff;
}
.box:nth-child(3) .percent svg circle:nth-child(1) {
stroke-dashoffset: 0;
stroke: #000
}
.box:nth-child(3) .percent svg circle:nth-child(2) {
stroke-dashoffset: calc(440 - (440 * 60)/100);
stroke: #c304fe;
}
.box:hover {
transform: translateY(-20px);
transition: all 0.5s;
}
.box:hover .number {
transform: scale(1.2);
transition: all 0.5s;
color: #fff !important;
}
.box:hover .text {
transform: scale(1.2);
transition: all 0.5s;
color: #fff !important;
}
.box .percent .number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #767576;
}
.box .percent .number h2 {
font-size: 48px;
}
.box .percent .number span {
font-size: 24px;
}
.box .text {
padding: 10px 0 0;
color: #999;
font-weight: 700;
letter-spacing: 1px;
}
</style>
</head>
</head>
<body>
<div class="box">
<div class="percent">
<svg>
<circle cx='70' cy='70' r='70'></circle>
<circle cx='70' cy='70' r='70'></circle>
</svg>
<div class="number">
<h2>87<span>%</span></h2>
</div>
</div>
<h2 class="text">Progress</h2>
</div>
<div class="box">
<div class="percent">
<svg>
<circle cx='70' cy='70' r='70'></circle>
<circle cx='70' cy='70' r='70'></circle>
</svg>
<div class="number">
<h2>85<span>%</span></h2>
</div>
</div>
<h2 class="text">Progress</h2>
</div>
<div class="box">
<div class="percent">
<svg>
<circle cx='70' cy='70' r='70'></circle>
<circle cx='70' cy='70' r='70'></circle>
</svg>
<div class="number">
<h2>60<span>%</span></h2>
</div>
</div>
<h2 class="text">Progress</h2>
</div>
</body>
</html>
【前端素材】模板-多种实用环形.zip （21个子文件） 
环形 
svg2.html 2KB css.html 3KB line渐变.html 2KB index6.html 2KB index4.html 5KB
首尾为圆形的圆弧进度条.htm 2KB index2.html 2KB circleManyFun.html 5KB canvas.html 3KB svg4.html 1KB index7.html 2KB svg3.html 962B svg5.html 5KB index.html 2KB 半圆环.htm 2KB svg.html 624B index3.html 2KB purecss.html 2KB svg6.html 1KB index5.html 4KB svg渐变.html 3KB资源评论
枫蜜柚子茶
- 粉丝: 9061
- 资源: 5358
最新资源
- 通信基本知识 2023.12
- 通信基本知识 2023.11
- 通信基本知识 2023.10
- 基于springboot框架的大型商场应急预案管理系统（完整Java源码+数据库sql文件+项目文档+Java项目编程实战+编程练手好项目）.zip
- 通信基本知识 2023.09
- 多少度是的撒多撒大所大所
- 通信基本知识 2023.08
- 通信基本知识 2023.07
- 通信基本知识 2023.06
- 通信基本知识 2023.05
- 通信基本知识 2023.04
- 基于springboot框架的精准扶贫管理系统（完整Java源码+数据库sql文件+项目文档+Java项目编程实战+编程练手好项目）.zip
- 通信基本知识 2023.03
- 通信基本知识 2023.02
- 基于MPPT的光伏SVPWM逆变并网：搭建仿真模型与双闭环控制策略.pdf
- 基于光风储能VSG无缝切换控制策略：0.3秒至1.3秒的独立运行与并网过程.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
