WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efecto de luz en el ícono social
1720
alejandrokundrah
Abrir en el editor
Video
Publica tu código
2
Recomendado
22 May 2025
Panel de administración
25 June 2025
Un código de Mete
28 June 2025
Un código de Mete
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) */