HTML CSS中的動畫

Question

大家好，我正在制作HTML CSS動畫。 我試圖做我想要的動畫，但是沒有成功，這是我的代碼

 var count=0; var rotation = 0; jQuery.fn.rotate = function(degrees) { $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); return $(this); }; function append(){ $("div").append("<img class=rot id=btn4 src =222.jpg />"); $("div").append("<img class=rot id=btn5 src =music-note.jpeg />") $("div").append("<img class=rot id=btn6 src =3.jpg />") $("div").append("<img class=rot id=btn7 src =45.jpg />") } function rot(x){ $("#btn").animate( { deg: x}, { duration: 400, step: function(now) { $(this).css({ transform: 'rotate(' + now + 'deg)' }); } } ); } function rot1(x){ $(".rot").animate( { deg: x}, { duration: 30, step: function(now) { $(this).css({ transform: 'rotate(' + now + 'deg)' }); } } ); } function rem(){ $('#btn1').remove(); $('#btn2').remove(); $('#btn3').remove(); $('#btn8').remove(); } function append1(){ $('#btn4').remove(); $('#btn5').remove(); $('#btn6').remove(); $('#btn7').remove(); $("div").append("<img class=remove id=btn1 src=456.jpg />"); $("div").append("<img class=remove id=btn2 src=78.jpg />"); $("div").append("<img class=remove id=btn3 src=9.jpg />"); $("div").append("<img class=remove id=btn8 src=download.jpg />"); } function play(){ if(count==0){ rot(135); myMove(500,10); rem(); //$("p").remove(".test"); append(); rot1(360); myMove3(500,0.05); //$("#btn").animate({top:"+=40"}, 0.000005); count++; } else if(count==1){ rot(-360); $("#btn").animate({top: "-=20"}, 0.000005); append1(); myMove1(500,5); myMove2(450,5); count=0; } } //Mymove(500,) function myMove(x,y) { var elem = document.getElementById("btn"); var pos = x; var id = setInterval(frame, y); function frame() { if (pos == 520) { clearInterval(id); } else { pos++; elem.style.top= pos + "px"; // elem.style.left = pos + "px"; } } } function myMove1(x,y) { var elem = document.getElementById("btn"); var pos = x; var id = setInterval(frame, y); function frame() { if (pos == 450) { clearInterval(id); } else { pos--; elem.style.top = pos + "px"; // elem.style.left = pos + "px"; } } } function myMove2(x,y) { var elem = document.getElementById("btn"); var pos = x; var id = setInterval(frame, y); function frame() { if (pos == 500) { clearInterval(id); } else { pos++; elem.style.top = pos + "px"; // elem.style.left = pos + "px"; } } } function myMove3(x,y) { var elem1 = document.getElementById("btn4"); var elem2=document.getElementById("btn5"); var elem3=document.getElementById("btn6"); var elem4= document.getElementById("btn7"); var pos = x; var id = setInterval(frame, y); function frame() { if (pos ==450) { clearInterval(id); } else { pos--; elem1.style.top= pos + "px"; elem2.style.top= pos + "px"; elem3.style.top= pos + "px"; elem4.style.top= pos + "px"; // elem.style.left = pos + "px"; } } } 

 #btn{ position: absolute; bottom: 81px; right:620px; width:7%; } #btn1{ position: absolute; bottom: 0px; right:400px; width:10%; } #btn2{ position: absolute; bottom: 10px; right:300px; width:8%; } #btn3{ position: absolute; bottom: 30px; right:820px; width:5%; } #btn4{ position: absolute; top: 500px; right:500px; width:4%; } #btn5{ position: absolute; top: 510px; right:350px; width:5%; } #btn6{ position: absolute; top: 495px; right:820px; width:5%; } #btn7{ position: absolute; top: 510px; right:970px; width:5%; } #btn8{ position: absolute; bottom: 25px; right:950px; width:5%; } #line{ position: absolute; bottom: 5px; right:530px; width:20%; } input:focus { outline: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

我嘗試旋轉，但是看起來不那么專業，我希望頁腳位於中間，這也是一個我找不到方法的問題

另外也有移動動畫，這也給我造成了問題

這是我想要分享的視頻即時消息，請幫助我即時嘗試，但沒有解決方案。

https://prnt.sc/m6q98n

Answer 1

嘗試將您的JavaScript放入具有JQuery src的script標記內，看看是否有幫助。