WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Contenitore di effetti luce HTML con CSS
860
ismaeltaybi
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
12 July 2025
Effetto bagliore della scheda CSS
14 March 2025
Sfera CSS Faux-3D /w Texture
30 December 2024
Un codice di cleancloud199
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) */