Text shadows as the mouse moves

Today, we share a text shadow effect with the mouse movement. The text of the instance uses a shadow effect, and the shadow moves and moves up and down with the mouse. The background of the instance is dynamically loaded, with different background colors for a period of time, and the effect is quite good-looking:

Online preview Source Download

The implemented code.

HTML code:

<H1contenteditable= "true">HellO pajumed!</H1>    <Scriptsrc= ' Jquery.js '></Script>    <Script>        $("H1"). MouseOver (function () {            $( This). addclass ("ye");        }); $("H1"). MouseLeave (function () {            $( This). Removeclass ("ye"); }); //@ sourceurl=pen.js    </Script>

CSS code:

Body{Background-color:Firebrick;-webkit-animation:color 35s ease-in 0s infinite;-moz-animation:color 35s linear 0s infinite;Animation:color 35s linear 0s infinite;}H1{font-family:Open Sans;Color:#fff;text-align:Center;font-size:70px;Line-height:200px;letter-spacing:26px;Text-transform:Uppercase;Text-shadow:    1px 1px 0 Rgba (0,0,0,10), 2px 2px 0 rgba (0,0,0,0.10), 3px 3px 0 rgba (0,0,0,0.10), 4px 4px 0 rgba (0,0,0,0.10), 5px 5px 0 Rgba (0,0,0,0.10), 6px 6px 0 rgba (0,0,0,0.10), 7px 7px 0 rgba (0,0,0,0.10), 8px 8px 0 rgba (0,0,0,0.10 ), 9px 9px 0 rgba (0,0,0,0.10), 10px 10px 0 rgba (0,0,0,0.10), 11px 11px 0 rgba (0,0,0,0.10), 12px 12px 0 rgba (0,  0,0,0.07), 13px 13px 0 rgba (0,0,0,0.07), 14px 14px 0 rgba (0,0,0,0.07), 15px 15px 0 rgba (0,0,0,0.06), 16px 16px    0 Rgba (0,0,0,0.06), 17px 17px 0 rgba (0,0,0,0.06), 18px 18px 0 rgba (0,0,0,0.06), 19px 19px 0 rgba (0,0,0,0.05), 20px 20px 0 Rgba (0,0,0,0.05), 21px 21px 0 rgba (0,0,0,0.05), 22px 22px 0 rgba (0,0,0,0.05), 22px 22px 0 rgba (0,0,0 , 0.04), 23px 23px 0 rgba (0,0,0,0.04), 24px 24px 0 rgba (0,0,0,0.04), 25px 25px 0 rgba (0,0,0,0.03), 26px 26px 0 Rgba (0,0,0,0.03), 27px 27px 0 rgba (0,0,0,0.03), 28px 28px 0 rgba (0,0,0,0.02), 29px 29px 0 rgba (0,0,0,0.02), 30 PX 30px 0 Rgba (0,0,0,0.02), 31px 31px 0 rgba (0,0,0,0.02), 32px 32px 0 rgba (0,0,0,0.02), 33px 33px 0 rgba (0,0,0,0.02), 34px 34px 0 Rgba (0,0,0,0.02), 35px 35px 0 rgba (0,0,0,0.01), 36px 36px 0 rgba (0,0,0,0.01), 37px 37px 0 rgba (0,0,0,0.01), 38px 3 8px 0 Rgba (0,0,0,0.01), 39px 39px 0 rgba (0,0,0,0.01);transition:text-shadow 1s ease-in-out;}/*BG Animation*/@-webkit-keyframes Color{0% {Background-color:Firebrick; }30%{Background-color:Sienna; }50%{Background-color:Darkslategray; }70%{Background-color:SaddleBrown; }100%{Background-color:Firebrick; }}@-moz-keyframes Color{0% {Background-color:Firebrick; }30%{Background-color:Sienna; }50%{Background-color:Darkslategray; }70%{Background-color:SaddleBrown; }100%{Background-color:Firebrick; }} @keyframes Color{0% {Background-color:Firebrick; }30%{Background-color:Sienna; }50%{Background-color:Darkslategray; }70%{Background-color:SaddleBrown; }100%{Background-color:Firebrick; }}.ye{Text-shadow:    1px-1px 0 Rgba (0,0,0,10), 2px-2px 0 Rgba (0,0,0,0.10), 3px-3px 0 Rgba (0,0,0,0.10), 4px-4px 0 rgba (0,0,  0,0.10), 5px-5px 0 Rgba (0,0,0,0.10), 6px-6px 0 Rgba (0,0,0,0.10), 7px-7px 0 Rgba (0,0,0,0.10), 8px-8px 0    Rgba (0,0,0,0.10), 9px-9px 0 Rgba (0,0,0,0.10), 10px-10px 0 Rgba (0,0,0,0.10), 11px-11px 0 Rgba (0,0,0,0.10), 12px-12px 0 Rgba (0,0,0,0.07), 13px-13px 0 Rgba (0,0,0,0.07), 14px-14px 0 Rgba (0,0,0,0.07), 15px-15px 0 rgba (0 , 0,0,0.06), 16px-16px 0 Rgba (0,0,0,0.06), 17px-17px 0 Rgba (0,0,0,0.06), 18px-18px 0 Rgba (0,0,0,0.06), 19px -19px 0 Rgba (0,0,0,0.05), 20px-20px 0 Rgba (0,0,0,0.05), 21px-21px 0 Rgba (0,0,0,0.05), 22px-22px 0 Rgba (0,0,0,0 .), 22px-22px 0 Rgba (0,0,0,0.04), 23px-23px 0 Rgba (0,0,0,0.04), 24px-24px 0 Rgba (0,0,0,0.04), 25px-25px    0 Rgba (0,0,0,0.03), 26px-26px 0 Rgba (0,0,0,0.03), 27px-27px 0 Rgba (0,0,0,0.03), 28px-28px 0 Rgba (0,0,0,0.02), 29px-29px 0 Rgba (0,0, 0,0.02), 30px-30px 0 Rgba (0,0,0,0.02), 31px-31px 0 Rgba (0,0,0,0.02), 32px-32px 0 Rgba (0,0,0,0.02), 33px-3 3px 0 Rgba (0,0,0,0.02), 34px-34px 0 Rgba (0,0,0,0.02), 35px-35px 0 Rgba (0,0,0,0.01), 36px-36px 0 Rgba (0,0,0,0.0 1), 37px-37px 0 Rgba (0,0,0,0.01), 38px-38px 0 Rgba (0,0,0,0.01), 39px-39px 0 rgba (0,0,0,0.01);}

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/9285

Text shadows as the mouse moves