WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von Redllowge
1343
Redllowge
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
12 June 2025
Ein Code von Metehan
16 September 2024
Eine Skyline bauen
30 March 2025
Ein Code von ytr3d3
HTML
Copy
Blue Assistant 3D
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; color: #fff; font-family: 'Arial', sans-serif; min-height: 100vh; overflow: hidden; } #animation-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .alexa-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); perspective: 1000px; } .alexa-ring { width: 200px; height: 200px; border-radius: 50%; position: relative; transform-style: preserve-3d; animation: float 6s ease-in-out infinite; transition: all 0.5s ease; } .alexa-ring::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #00a2ff; box-shadow: 0 0 50px #00a2ff; animation: pulse 2s linear infinite; transition: all 0.5s ease; } .alexa-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: radial-gradient(circle at center, #00a2ff, #0066cc); border-radius: 50%; box-shadow: 0 0 30px #00a2ff; transition: all 0.5s ease; } @keyframes float { 0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); } 50% { transform: translateY(-20px) rotateX(10deg) rotateY(20deg); } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.8; } } @keyframes pulse-green { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.8; } } @keyframes ripple { 0% { width: 0px; height: 0px; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } } @keyframes fadeInOut { 0% { opacity: 0; transform: translateY(20px) translateX(-50%) scale(0.8); } 20% { opacity: 1; transform: translateY(0) translateX(-50%) scale(1); } 80% { opacity: 1; transform: translateY(0) translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-20px) translateX(-50%) scale(0.8); } } @keyframes search-appear { 0% { opacity: 0; transform: translateX(-50%) scale(0.8) rotateX(-30deg); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotateX(0deg); } }
JS
Copy
VANTA.NET({ el: "#animation-background", mouseControls: true, touchControls: true, gyroControls: false, minHeight: 200.0, minWidth: 200.0, scale: 1.0, scaleMobile: 1.0, color: 0x00a2ff, backgroundColor: 0x0, points: 15.0, maxDistance: 25.0, spacing: 17.0, });