Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .ray-container { position: relative; width: 100%; max-width: 400px; height: 250px; background-color: #f4f4f4; border: 2px dashed #ccc; margin: 0 auto; } .moving-dot { width: 40px; height: 40px; background-color: #ff416c; border-radius: 50%; position: absolute; /* Place at the center. offset-anchor automatically centers the element on the path */ top: 50%; left: 50%; /* Define a ray pointing down and to the right (135 degrees). Defaults to closest-side */ offset-path: ray(135deg); /* Animate the distance along the ray */ animation: shootRay 2s ease-in-out infinite alternate; } @keyframes shootRay { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } </style> <div class="ray-container"> <div class="moving-dot"></div> </div>