今天給大家分享一款随着滑鼠移動的文字陰影特效。該執行個體的文字用了陰影特效，陰影會随滑鼠上下移動和移動。執行個體的背景采用了動态加載，每間隔一段時間用不同的背景色，效果相當好看，一起看下效果圖：
線上預覽 源碼下載下傳
實作的代碼。
html代碼：
<h1 contenteditable="true">
HellO Pajumed!</h1>
<script src='jquery.js'></script>
<script> $("h1").mouseover(function () {
$(this).addClass("ye");
});
$("h1").mouseleave(function () {
$(this).removeClass("ye");
}); //@ sourceURL=pen.js
</script> css代碼：
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),
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 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 38px 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.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),
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 -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 -38px 0 rgba(0,0,0,0.01),
39px -39px 0 rgba(0,0,0,0.01);
} 注：本文愛程式設計原創文章，轉載請注明原文位址：http:/Article/9285