Untitled
unknown
plain_text
a month ago
1.5 kB
1
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spinning Wheel</title> <style> .wheel-container { position: relative; width: 300px; height: 300px; border-radius: 50%; border: 10px solid #ccc; margin: 50px auto; } .wheel { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient( red 0deg 60deg, yellow 60deg 120deg, green 120deg 180deg, blue 180deg 240deg, orange 240deg 300deg, purple 300deg 360deg ); position: absolute; top: 0; left: 0; animation: spin 5s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } .marker { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid black; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="wheel-container"> <div class="marker"></div> <div class="wheel"></div> </div> </body> </html>
Leave a Comment