progressbar实现金额数字变动和半圆进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:progressbar实现金额数字变动和半圆进度条动画效果代码
代码标签: progressbar 金额 数字 变动 半圆 进度条 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");
@property --num {
syntax: "<integer>";
initial-value: 1000000;
inherits: false;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: auto;
height: 100vh;
background-color: #000813;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: auto;
padding: 32px;
}
svg {
fill: none;
position: absolute;
}
.balance-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
}
.label {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
text-align: center;
color: #B3B5B9;
margin-bottom: 4px;
}
.amount, .amount2 {
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 40px;
color: #FCBC2C;
}
.amount.amount2, .amount2.amount2 {
color: #FFF;
}
.countup {
animation: counter 1.2s 1;
counter-reset: num var(--num);
}
.countup::after {
content: counter(num);
}
@keyframes counter {
from {
--num: 0;
}
to {
--num: 1000000;
}
}
</style>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0