CSS 计数器是一种根据规则自动递增变量的功能。
它使用以下几个属性:
counter-reset - 用于创建或重置计数器。
counter-increment - 用于递增变量。
content - 用于插入生成的内容。
counter() 或 counters() 函数 - 将计数器的值添加到元素。
要使用 CSS 计数器,首先需要用 counter-reset 创建计数器。以下是一个示例,在页面中创建一个计数器(在 body 选择器中),每个元素的计数值都会递增,并在每个元素前添加 "Section <计数值>:"。
body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }
完整参考这个代码:
点击查看全文
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @property --t { syntax: "<number>"; initial-value: 10; inherits: true; } @property --s { syntax: "<integer>"; initial-value: 0; inherits: true; } body { display: grid; place-items: center; height: 100vh; background-color: #282c34; } @keyframes linear { to { --t: 0; } } .countdown { animation: linear 10s linear infinite; display: grid; width: 20em; height: 20em; .circle { grid-column: 1; grid-row: 1; .circle-01 { fill: none; stroke: #fff; } .circle-02 { --t: counter(s, decimal-leading-zero); --k: calc(var(--t)/10); fill: none; transform: rotate(-90deg); stroke-linecap: round; stroke: color-mix(in hsl shorter hue, #8a9b0f calc(var(--k)*100%), #940a3d); stroke-dasharray: var(--k) 1; } } &::after { grid-column: 1; grid-row: 1; place-self: center; font-size: 5em; color: #fff; --s: calc(var(--t)/1); counter-reset: s var(--s); content: "00:" counter(s, decimal-leading-zero); } } </style> </head> <body> <div class="countdown"> <svg viewBox="-50 -50 100 100" stroke-width="10" class="circle"> <circle r="45" class="circle-01"></circle> <circle r="45" class="circle-02" pathLength="1"></circle> </svg> </div> </body> </html>
网友回复
腾讯混元模型广场里都是混元模型的垂直小模型,如何api调用?
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?