WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Contêiner de efeitos de luz HTML com CSS
854
ismaeltaybi
Abrir no Editor
Publique Seu Código
Recomendado
27 June 2025
código de dança
4 December 2024
Conceito de React Clock
5 August 2025
O medo de perder
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) */