<!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> @keyframes move { 100% { transform: translateX(300px); } } :root { --delay: 0s; } .ball { width: 20px; height: 20px; border-radius: 50%; background-color: tomato; animation: move 2s var(--delay) linear; animation-play-state: paused; } </style> </head> <body> <div class="ball"></div> <input type="range" min="0" max="1" step="0.01" value="0" > <script> const root = document.querySelector(":root") const ipt = document.querySelector('input') ipt.addEventListener('input', ev => { root.style.setProperty('--delay', `${-ev.target.value * 2 + 0.00001}s`) }) </script> </body> </html>
标签:动画,负值,--,delay,querySelector,ev,root,css From: https://www.cnblogs.com/fmg0224/p/18123925