示例
@property 定义参数
css"> /* 定义参数 */@property --step {syntax: '<integer>';inherits: true;initial-value: 10;}
css"> /* 添加动画 */@keyframes widthAm {0% {width: 10%;--step: 10;}100% {width: 80%;--step: 80;}}
counter-reset 定义css计数器
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>css">/* 定义参数 */@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>
