HTML5是一種廣泛應用于網頁制作的標記語言,在HTML5中,我們可以使用一些代碼來制作簡易的動畫效果。
<!DOCTYPE html> <html> <head> <title>HTML5簡易動畫制作</title> <script> var animate = setInterval(move, 10); var pos = 0; var box = document.getElementById('box'); function move() { if (pos >= 150) { clearInterval(animate); } else { pos++; box.style.top = pos+'px'; box.style.left = pos+'px'; } } </script> <style> #box { width: 50px; height: 50px; background-color: red; position: relative; top: 50px; left: 50px; } </style> </head> <body> <div id="box"></div> </body> </html>
上面的代碼中,我們使用了JavaScript的setInterval函數來實現動畫效果。該函數會在指定的時間間隔內重復執行指定的代碼。我們在每次執行的過程中,逐漸改變小方塊的位置,從而實現動畫效果。
下一篇不同大小圖片一排css