html 为什么这些不同动画的计时会随着时间的推移而变慢和无序?

fnatzsnv  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(130)

这里我有一个视频,每隔几秒钟就有一个旋转的动画和视频,在旋转过程中视频变小变大。但是随着时间的推移,时间就乱了。

let degree = 720;
function rotateElement(){
    let spin = `rotate(${degree}deg)`;
    document.getElementById('myVideo').style.transform = spin;
    document.getElementById('myVideo').style.transitionDuration = "1s";
    degree += 720;
}

function smaller(){
    document.getElementById('myVideo').style.maxWidth = "10px";
    document.getElementById('myVideo').style.maxHeight = "10px";
    document.getElementById('myVideo').style.transitionDuration = "1s";
}

function bigger(){
    document.getElementById('myVideo').style.maxWidth = "30vw";
    document.getElementById('myVideo').style.maxHeight = "19vw";
    document.getElementById('myVideo').style.transitionDuration = "1s";
}

//setInterval(change, 5000);



window.onload = function () {
    setInterval(change, 5000);
    setInterval(rotateElement, 4900);
    setInterval(smaller, 4850);
    setInterval(bigger, 5050);
    
};
kuhbmx9i

kuhbmx9i1#

不确定你到底想让动画做什么旋转,但这是基本的想法,只是这样做的CSS。
第一个

相关问题