首页 > 代码库 > 随着鼠标移动的文字阴影
随着鼠标移动的文字阴影
今天给大家分享一款随着鼠标移动的文字阴影特效。该实例的文字用了阴影特效，阴影会随鼠标上下移动和移动。实例的背景采用了动态加载，每间隔一段时间用不同的背景色，效果相当好看，一起看下效果图：
在线预览 源码下载
实现的代码。
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
随着鼠标移动的文字阴影
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。