随着鼠标移动的文字阴影

浏览数：30 / 时间：2015年06月11日

今天给大家分享一款随着鼠标移动的文字阴影特效。该实例的文字用了阴影特效，阴影会随鼠标上下移动和移动。实例的背景采用了动态加载，每间隔一段时间用不同的背景色，效果相当好看，一起看下效果图：

实现的代码。

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);
}