|
|

楼主 |
发表于 2024-2-2 22:24
|
显示全部楼层
代码
- <style>
- #mbox {
- margin: 20px auto;
- width: 200px;
- height: 200px;
- border-radius: 50%;
- background:
- linear-gradient(green, gray, orange),
- repeating-radial-gradient(at var(--per), blue 2px, white 4px);
- background-blend-mode: color;
- animation: rot 6s infinite linear var(--state);
- --per: 50%;
- --state: running;
- }
- @keyframes rot { to { transform: rotate(1turn); } }
- </style>
- <div id="mbox"></div>
- <script>
- let per = 50, step = 1, raf;
- var render = () => {
- per += step;
- if(per <= 0 || per >= 100) step = -step;
- mbox.style.setProperty('--per', per + '%');
- raf = requestAnimationFrame(render);
- };
- render();
- mbox.onclick = () => {
- if(raf) {
- raf = cancelAnimationFrame(raf);
- mbox.style.setProperty('--state', 'paused');
- }else{
- raf = requestAnimationFrame(render);
- mbox.style.setProperty('--state', 'running');
- }
- };
- </script>
复制代码
|
|