随着鼠标移动的文字阴影

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

在线预览   源码下载

实现的代码。

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://www.w2bc.com/Article/9285

时间： 2024-10-24 15:11:00

随着鼠标移动的文字阴影的相关文章

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt

用js onselectstart事件鼠标禁止选中文字

IE&&Chrome中适用此方法 document.onselectstart=function(){return false;} onselectstart是防止内容被选中默认状态是true <body onselectstart=return(event.srcElement.type=='text')> 选不中 <input type="text" name="" value="来选吧"> </

CSS改变被鼠标选中的文字颜色及背景

页面中的文字被鼠标选中的文字颜色及背景怎么设置? ::selection { background:#e96147;  color:red; } ::-moz-selection { background:#e96147;  color:red; } ::-webkit-selection { background:#e96147;  color:red; } 希望对大家有帮助

css3新增属性--文本新增样式文字阴影

文字阴影 最简单用法 h1{ font:100px/200px "微软雅黑"; text-align:center; color:#fff; text-shadow:2px 2px 4px #000;} 阴影叠加 text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的,再渲染前面的 几个好玩的例子 层叠 层叠:color:red; font-size:100px; font-weight:bold; text-shadow:2px

css实现鼠标经过导航文字偏位效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS3的文字阴影—text-shadow

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3的文字阴影-text-shadow</title> <style> body{margin: 0;padding: 100px;} .example{ background: #666666; width: 440px; padding:

鼠标悬浮显示文字半透明背景

鼠标悬浮显示文字半透明背景 鼠标悬浮头像,出现文字"上传头像",之前都是使用< a title="上传头像"></a>这样的title来实现现在设计稿,是在头像上面,显示的大号字体的文字,且有一层黑色遮罩层第一想法是,多写一个层,悬浮时候,出现即可多想一步,使用css的content:"",来实现content后面的是双引号针对半透明黑色背景层background:#000opacity:0.5这是透明了全部(背景色和文字

Button 文字阴影，自定义图片，代码绘制样式，添加音效的方法

1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent&qu

Css3 文字阴影和盒子阴影

文字阴影text-shadow的使用方法 text-shadow: length  length  length  color; 前三个length分别表示 阴影离开文字的横方向距离(也就是X轴方向),阴影离开文字纵方向的距离 (即Y轴方向),阴影的模糊半径,color是指阴影的颜色 <div>专注前端</div> div{ font-size: 40px; text-shadow: 5px 5px 0 grey;} 专注前端 span{ font-size: 40px; text