Salve a tutti, voglio realizzare una animazione come in descrizione con javascript / CSS come in figura. Avete qualche suggerimento? Grazie!!!!
anim.png
Non so se è questo che chiedevi
codice:<!doctype html> <html> <body> <div id="div1" style="width:300px; height:200px; border: 1px solid red;"></div> <br> <input type="button" id="bottone1" value="avvia" onclick="avvia1()"> <script> function avvia1() { elemento=document.getElementById("div1"); elemento.style.fontSize="40"; elemento.style.backgroundColor="cyan" elemento.style.borderColor="blue"; elemento.style.color="red"; elemento.style.position="absolute"; elemento.style.top =300+"px"; elemento.style.left =200+"px"; elemento.style.borderWidth =5+"px"; elemento.style.webkitTransform = 'rotate('+90+'deg)'; elemento.style.mozTransform = 'rotate('+90+'deg)'; elemento.style.msTransform = 'rotate('+90+'deg)'; elemento.style.oTransform = 'rotate('+90+'deg)'; elemento.style.transform = 'rotate('+90+'deg)'; } </script> </body> </html>
sviluppando:
codice:<!doctype html> <html> <body> <input type="button" id="bottone1" value="avvia" onclick="avvia1()"> <input type="button" id="bottone2" value="ferma" onclick="ferma1()"> <div id="div1" style="width:300px; height:200px; border: 1px solid red;"></div> <br> <script> var ang=0; function avvia1() { intervallo1=window.setInterval("muovi1()",50); } function muovi1() { ang=ang+1 elemento=document.getElementById("div1"); elemento.style.fontSize="40"; elemento.style.backgroundColor="cyan" elemento.style.borderColor="blue"; elemento.style.color="red"; elemento.style.position="absolute"; elemento.style.top =300+"px"; elemento.style.left =200+"px"; elemento.style.borderWidth =5+"px"; elemento.style.webkitTransform = 'rotate('+ang+'deg)'; elemento.style.mozTransform = 'rotate('+ang+'deg)'; elemento.style.msTransform = 'rotate('+ang+'deg)'; elemento.style.oTransform = 'rotate('+ang+'deg)'; elemento.style.transform = 'rotate('+ang+'deg)'; } function ferma1(){ clearInterval(intervallo1); } </script> </body> </html>
Permessi di invio
Rispondi quotando