javascript animatoin and css animation both
<!DOCTYPE html><head> <title>circle</title> <style> #circle0{ position: absolute; top: 25px; left: 30px; width:400px; height:400px; border-radius:100%; box-sizing:border-box; border:20px dotted rgb(47, 0, 255); animation:3s linear infinite rotation0; } @keyframes rotation0{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } #cw{ position: absolute; top: 100px; left: 100px; } </style></head><body> <p id="circle0"></p> <canvas id="cw"></canvas> <script> const WIDTH = 800; const HEIGHT = 700; const canvas = document.createElement('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const context = canvas.getContext('2d'); document.body.appendChild(canvas); class Circle { constructor(color,x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color=color; this.velocity = 2; this.state=0; } update() { if(this.radius > 70 ) { this.radius = 2 if(this.color==0){ this.color=1; }else if(this.color==1){ this.color=2; }else if(this.color==2){ this.color=3; }else if(this.color==3){ this.color=0; } }else{ this.radius += 2; } } render(context) { context.beginPath(); if(this.color==0){ context.fillStyle = 'rgb(255, 0, 0)'; // 赤色 }else if(this.color==1){ context.fillStyle = 'rgb(0, 0, 255)'; // 青色 }else if(this.color==2){ context.fillStyle = 'rgb(0, 255, 0)'; // 緑色 }else if(this.color==3){ context.fillStyle = 'rgb(100, 100, 100)'; // } context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); context.fill(); } } const objects = []; objects.push(new Circle(0,150,150, 40)); objects.push(new Circle(1,300,150, 40)); objects.push(new Circle(2,150,300, 40)); objects.push(new Circle(3,300,300, 40)); function loop(timestamp) { context.clearRect(0, 0, WIDTH, HEIGHT); objects.forEach((obj) =function(obj){ obj.update()}); objects.forEach((obj) => obj.render(context)); window.requestAnimationFrame((ts) =function(ts){loop(ts)}); } window.requestAnimationFrame((ts) =function(ts){loop(ts)}); </script></body></html>