WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von ytr3d3
870
ytr3d3
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
15 July 2025
Beispiel für ein animiertes HTML-Anmeldeformular
13 October 2024
meine sozialen Medien
26 April 2025
Ein Code von shasshan7236
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(); })