Mysterious:
can anyone make it a circle and make it so ball doesnt goes outsind the borders of a circle
Mysterious:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Box with Circles</title> <style> body { background-color: black; } .box { background-color: transparent; margin: 0 auto; width: 500px; height: 300px; position: relative; border-radius: 20px; border: 3px solid #006699; /* Initial color added to border */ overflow: none; } .box b { display: block; width: 20px; height: 20px; border-radius: 100%; background-color: #ffcc00; /* Initial color added to ball */ position: absolute; animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate, changeBallColor 0.5s linear 0s infinite; } @keyframes moveX { from { left: 0; } to { left: 480px; } } @keyframes moveY { from { top: 0; } to { top: 280px; } } @keyframes changeBallColor { from { background-color: #ffcc00; } /* Initial color of ball */ to { background-color: #ffffff; } /* Change color of ball */ } </style> </head> <body> <div class="box" id="box"> <b></b> </div> <script> // Function to generate random color function getRandomColor() { return '#' + Math.floor(Math.random()*16777215).toString(16); } // Function to change the color of ball function changeBallColor() { const ball = document.querySelector('.box b'); // Change color of ball ball.style.backgroundColor = getRandomColor(); } // Change ball color every 0.5 seconds setInterval(changeBallColor, 2000); // Function to change the color of border function changeBorderColor() { const box = document.getElementById('box'); // Change color of border box.style.borderColor = getRandomColor(); } // Change border color every 2 seconds setInterval(changeBorderColor, 500); </script> </body> </html>
snowie:
@aratox
Aratox:
To make the ball stay within the borders of the circle, you can update the moveX and moveY keyframes to limit the movement of the ball. Here's the code: ``` @keyframes moveX { from { left: 0; } to { left: 480px; } } @keyframes moveY { from { top: 0; } to { top: 280px; } } ``` You can modify the moveX and moveY keyframes to control the movement of the ball within the circle. You can adjust the from and to values to define the range of movement. By keeping the from values as 0 and adjusting the to values to stay within the boundaries of the circle, you can ensure that the ball stays inside the circle while animating.
Extrinix:
@mysterious Do you still need assistance with this question?
Join our real-time social learning platform and learn together with your friends!
Bounty:
guys I'm losing all my motivation for school work how can I motivate myself to stop being lazy because even while I'm being on my work it still piles up and
albert14ring:
Can you give me suggestions on the fastest and most organized way to be ready early in the morning to go to school without any confusion or delay? The impor
Twaylor:
how to make good breakfast food ingredients : 1 mother flat bread bananas peanut
lovelove1700:
u00bfA quu00e9 hora es tu clase?Fill in the blanks Activity unlimited attempts left Completa.
glomore600:
find someone says that that one person your talking to doesn't really like you should I take their advice and leave or should I ask the person i'm talking t
Addif9911:
Him I dimmed the light that once felt mine, a glow I never meant to lose. I over-read the shadows, let voices crowd the room where only two hearts shouldu20
EdwinJsHispanic:
Poem to my mom who proved my point "You proved my point, I am a failure. but I kinda wish, you were my savior.