示例
@property 定义参数
/* 定义参数 */
@property --step {
syntax: '<integer>';
inherits: true;
initial-value: 10;
}
/* 添加动画 */
@keyframes widthAm {
0% {
width: 10%;
--step: 10;
}
100% {
width: 80%;
--step: 80;
}
}
counter-reset 定义css计数器
/* 定义css计数器 */
counter-reset: count var(--step);
/* 伪类使用 */
content: counter(count);
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定义参数 */
@property --step {
syntax: '<integer>';
inherits: true;
initial-value: 10;
}
/* 添加动画 */
@keyframes widthAm {
0% {
width: 10%;
--step: 10;
}
100% {
width: 80%;
--step: 80;
}
}
.bar-main {
margin-left: 6px;
width: 269px;
height: 10px;
background: linear-gradient(135deg, rgba(255, 25, 25, 0.1) 0%, rgba(251, 140, 21, 0.1) 100%);
border-radius: 5px;
}
.bar-line {
height: 10px;
border-radius: 5px;
position: relative;
background: linear-gradient(135deg, #ff1919 0%, #fb8c15 100%);
/* 执行动画 */
animation: widthAm 3s 0.2s linear both;
}
.line-border {
position: absolute;
width: 12px;
height: 12px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0px 0px 3px 0px rgba(23, 171, 253, 0.5);
right: 0;
top: 50%;
transform: translate(50%, -50%);
}
.line-text {
position: absolute;
font-family: PingFangSC, PingFang SC;
font-weight: bolder;
font-size: 12px;
color: #333333;
right: 0;
top: 50%;
transform: translate(calc(100% + 15px), -50%);
/* 定义css计数器 */
counter-reset: count var(--step);
}
.line-text::before {
/* 伪类使用 */
content: counter(count);
}
</style>
</head>
<body>
<div class="bar-main">
<div class="bar-line">
<div class="line-border"></div>
<div class="line-text">%</div>
</div>
</div>
</div>
</body>
</html>