您的位置：首页 > 其它

圆球canvas图，类似进度条

2017-11-09 19:58 141 查看

<!DOCTYPE html>

<html class="hb-loaded">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

body{background-color: #fff}

@-webkit-keyframes load {

0% {

stroke-dashoffset: 0;

}

}

@keyframes load {

0% {

stroke-dashoffset: 0;

}

}

.progress {

position: relative;

display: inline-block;

padding: 0;

text-align: center;

}

.progress > li {

display: inline-block;

position: relative;

text-align: center;

color: #93A2AC;

font-family: Lato;

font-weight: 100;

margin: 2rem;

}

.progress > li:before {

content: attr(data-name);

position: absolute;

width: 120px;

bottom: -2rem;

font-weight: 400;

}

.progress > li:after {

content: attr(data-percent);

position: absolute;

width: 100%;

top: 3.7rem;

left: 0;

font-size: 2rem;

text-align: center;

}

.progress svg {

width: 10rem;

height: 10rem;

}

.progress svg:nth-child(2) {

position: absolute;

left: 0;

top: 0;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.progress svg:nth-child(2) path {

fill: none;

stroke-width: 25;

stroke-dasharray: 629;

stroke: #fff;

opacity: .9;

-webkit-animation: load 2s;

animation: load 2s;

}

</style>

</head>

<body huaban_collector_injected="true">



<ul class="progress">

<li data-percent="60%">

<svg viewBox="-10 -10 220 220">

<g fill="none" stroke-width="20" transform="translate(100,100)">

<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>

<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>

<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>

<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>

<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>

<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>

</g>

</svg>

<svg viewBox="-10 -10 220 220">

<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="628"></path>

</svg>

</li>



</ul>



<svg width="0" height="0">

<defs>

<lineargradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">

<stop stop-color="red"></stop>

<stop offset="100%" stop-color="#8e6677"></stop>

</lineargradient>

<lineargradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
4000
;

<stop stop-color="red"></stop>

<stop offset="100%" stop-color="#9b5e67"></stop>

</lineargradient>

<lineargradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">

<stop stop-color="red"></stop>

<stop offset="100%" stop-color="#9c787a"></stop>

</lineargradient>

<lineargradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">

<stop stop-color="red"></stop>

<stop offset="100%" stop-color="#817a94"></stop>

</lineargradient>

<lineargradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">

<stop stop-color="red"></stop>

<stop offset="100%" stop-color="#498a98"></stop>

</lineargradient>

<lineargradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">

<stop stop-color="red"></stop>

<stop offset="100%" stop-color="#618099"></stop>

</lineargradient>

</defs>

</svg>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航