/* Global Reset */
{ margin: 0; padding: 0; box-sizing: border-box; }
/* Body Styling */ body { background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Arial', sans-serif; color: white; }
/* Circle Styling */ .circle { width: 200px; height: 200px; background-color: #4a90e2; border-radius: 50%; position: relative; animation: circleAnimation 5s ease-in-out infinite, moveCircle 6s ease-in-out infinite; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; }
/* Circle Hover Effect */ .circle:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.6); }
/* Circle Animation: Size and Color */ @keyframes circleAnimation { 0%, 100% { background-color: #4a90e2; width: 200px; height: 200px; } 25% { background-color: #f06; width: 250px; height: 250px; } 50% { background-color: #50e3c2; width: 300px; height: 300px; } 75% { background-color: #f5a623; width: 250px; height: 250px; } }
/* Circle Movement Animation */ @keyframes moveCircle { 0% { transform: translate(0, 0); } 25% { transform: translate(200px, -200px); } 50% { transform: translate(-200px, 200px); } 75% { transform: translate(200px, 200px); } 100% { transform: translate(0, 0); } }
/* Text inside the Circle */ .circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: bold; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); color: #fff; }
Last updated