Interactive Web3 Animation

Discover the Future

/* Global Styles */ body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #181d2e, #2b2f45); font-family: 'Arial', sans-serif; overflow: hidden; color: #fff; } /* Animation Wrapper */ .animation-wrapper { position: relative; text-align: center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* Glowing Circle */ .glowing-circle { width: 20vmin; /* Use viewport-relative units for responsiveness */ height: 20vmin; border-radius: 50%; background: radial-gradient(circle, #ff007c, #6d00d7); box-shadow: 0 0 30px rgba(255, 0, 124, 0.8), 0 0 60px rgba(109, 0, 215, 0.6); display: flex; justify-content: center; align-items: center; animation: glow 2s infinite alternate; cursor: pointer; transition: transform 0.3s ease-in-out; } .glowing-circle:hover { transform: scale(1.2); } /* Pulse Text */ .pulse-text { font-size: 4vw; /* Scales text size relative to viewport width */ font-weight: bold; text-align: center; background: linear-gradient(to right, #ff007c, #6d00d7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: pulseText 1.5s infinite ease-in-out; } /* Keyframes */ @keyframes glow { 0% { box-shadow: 0 0 15px rgba(255, 0, 124, 0.6), 0 0 30px rgba(109, 0, 215, 0.4); } 100% { box-shadow: 0 0 40px rgba(255, 0, 124, 0.8), 0 0 80px rgba(109, 0, 215, 0.6); } } @keyframes pulseText { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Responsive Design */ @media (max-width: 768px) { .glowing-circle { width: 30vmin; height: 30vmin; } .pulse-text { font-size: 5vw; } .submenu-wrapper_1UU { background-color: #282c3d; padding: 5px; } } @media (max-width: 480px) { .glowing-circle { width: 40vmin; height: 40vmin; } .pulse-text { font-size: 6vw; } } /* Submenu Wrapper */ .submenu-wrapper_1UU { background-color: #181d2e; padding: 10px; border-radius: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } body:before { content: ''; /* Ensures the pseudo-element is created */ display: block; /* Makes it visible */ background-color: #000; /* Black background */ width: 100%; height: 100vh; /* Full height of the viewport */ position: absolute; top: 0; left: 0; z-index: -1; /* Places it behind other content */ } body:before { content: 'Welcome to Our Site'; /* Custom text */ display: block; background-color: #000; color: #fff; text-align: center; padding: 20px; font-size: 1.5em; font-family: Arial, sans-serif; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } html > *:first-child { background-color: #000; color: #fff; padding: 20px; text-align: center; font-size: 1.2em; }