WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
ytr3d3 द्वारा एक कोड
483
ytr3d3
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
22 April 2025
मेटेहान का एक कोड
13 June 2025
मेटेहन द्वारा एक कोड
26 December 2024
कुशलक्लाउड646 द्वारा एक कोड
HTML
Copy
CodePen - GSAP JS: multiple text-shadow : hover
3d Hover Effect
animated
with multiple
text-shadows
CSS
Copy
body { font-family: 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: -3px; padding:50px; } h2{ font-size:100px; position:relative; font-weight: bold; cursor: pointer; } /* text-shadow forked from: https://codepen.io/teetteet/details/dFICw#forkline */ .superShadow { text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3); } strong{ font-size:200px; }
JS
Copy
$("h2").each(function(index, element){ var animation = TweenMax.to(this, 0.2, { className: '+= superShadow', marginTop: '-10px', marginBottom: '10px', ease: Power1.easeIn, paused:true }); element.animation = animation; }) $('h2').hover(function(){ this.animation.play() }, function(){ this.animation.reverse(); })