我有一个简单的车轮旋转动画.我试图使用滑块(输入范围)控制旋转轮的速度.我已设法做到这一点,但每次我更改动画时动画重新启动(它跳转).寻找一种解决方案,以创造一个平稳的速度增长.当用户增加滑块的值时,轮子以增加的速度旋转.
在下面的代码中,#loading是旋转轮.
$(document).on('input', '#slider', function() { var speed = $(this).val(); $('#speed').html(speed); $("#loading").css("animation-duration", 50 / speed + "s"); });
#loading { position: absolute; left: 0; right: 0; margin: auto; transform-origin: 50% 50%; animation: rotateRight infinite linear; animation-duration: 0; } @keyframes rotateRight { 100% { transform: rotate(360deg); } }
Speed:
京公网安备 11010802041100号