WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Vocal Assistant
1531
Redllowge
Open In Editor
Publish Your Code
Recommended
21 August 2024
Creative HTML Portfolio Template
20 June 2025
Social Media Link Cards HTML
13 June 2025
A Code by Metehan
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, });