WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par ytr3d3
981
ytr3d3
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 February 2025
Un code par securearray494
22 August 2024
Une page de connexion simple
4 December 2024
Un code par mikey
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(); })