纯css实现仪表盘进度效果
代码语言:html
所属分类:进度条
代码描述:纯css实现仪表盘进度效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic,300,500,500italic'>
<style>
body {
background: #232323;
font-family: Roboto;
}
.progress {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateY(180deg);
}
.progress:before {
content: "";
position: absolute;
width: 185px;
height: 185px;
background: #232323;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.progress:after {
content: "";
position: absolute;
width: 8px;
height: 100px;
background: linear-gradient(180deg, #d63031, #232323);
border-radius: 10px;
box-shadow: 0 -19px 9px -3px #d63031;
top: 0;
right: 50%;
margin-right: -4px;
z-index: 999;
transform: rotate(90deg);
transform-origin: bottom;
animation-name: meter;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0, 0.1, 0.9, 0.81);
animation-play-state: paused;
animation-direction: reverse;
animation-delay: 5s;
}
.progress .precent {
position: absolute;
top: 29px;
left: 50%;
z-index: 99;
transform: translate(-50%, 0) rotateY(180deg);
font-size: 19px;
color: white;
width: 47px;
text-align: center;
line-height: 1.5;
}
.progress .p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0