WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सोशल आइकन पर प्रकाश प्रभाव
1722
alejandrokundrah
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
2
अनुशंसित
21 October 2024
जुगनू बटन
18 December 2025
CrazyGames SDK शिम के साथ ज़िप फ़ाइल से Unity WebGL लोडर
16 May 2025
डी.ई.एम.ई. द्वारा एक कोड
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) */