WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efeito de luz no ícone social
1480
alejandrokundrah
Abrir no Editor
Publique Seu Código
Recomendado
10 August 2024
9 September 2025
Página de reserva de hotel HTML - Quartos, comodidades, contato
9 November 2025
Código CSS HTML JavaScript para Smartwatch 3D
HTML
Copy
Light Effects | CodeVik
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #292828; animation: colorchanger 4s linear infinite; } @keyframes colorchanger { 0%, 100% { filter: hue-rotate(270deg); } 50% { filter: hue-rotate(360deg); } } .container { position: relative; width: 400px; height: 100px; transform-style: preserve-3d; animation: anim 4s linear infinite; } @keyframes anim { 0% { transform: rotateX(-30deg) rotateY(0deg); } 100% { transform: rotateX(-30deg) rotateY(360deg); } } .container .box { position: relative; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; } .container .box span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(21, 21, 25, 1), rgba(255, 6, 6, 1)); transform-style: preserve-3d; transform: rotateY(calc(90deg * var(--i))) translateZ(200px); } .top { position: absolute; top: 0; left: 0; width: 400px; height: 400px; background: #222; transform-style: preserve-3d; transform: rotateX(90deg) translateZ(200px); display: flex; justify-content: center; align-items: center; } .top::before{ content: ''; position: absolute; top: 0; left: 0; width: 400px; height: 400px; background-color: rgba(255, 6, 6, 1); transform: translateZ(-250px); opacity: 0.75; box-shadow: 0 0 120px rgba(255, 6, 6, 0.2), 0 0 200px rgba(255, 6, 6, 0.4), 0 0 300px rgba(255, 6, 6, 0.6), 0 0 400px rgba(255, 6, 6, 0.8), 0 0 500px rgba(255, 6, 6, 1); } .icon { position: absolute; font-size: 15em; color: rgba(255, 6, 6, 1); text-shadow: 0 0 50px rgba(255, 6, 6, 0.25), 0 0 100px rgba(255, 6, 6, 0.5), 0 0 200px rgba(255, 6, 6, 0.75), 0 0 300px rgba(255, 6,6,1); } .icon:hover{ transform: scale(1.1); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */