WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di ytr3d3
1052
ytr3d3
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
28 June 2025
Studio di progettazione architettonica | DISEGNO
23 August 2025
Struttura HTML del contenitore di animazione CSS
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - GSAP JS: multiple text-shadow : hover</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:900' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <h2>3d Hover Effect</h2> <h2>animated</h2> <h2>with multiple</h2> <h2>text-shadows</h2> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.2/TweenMax.min.js'></script><script src="./script.js"></script> </body> </html>
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(); })
