动态文字阴影 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态文字阴影</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lilita+One'); body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: rgba(0,0,0,0.1); } .test { font-family: 'Lilita One', cursive; font-size: 5rem; color: white; text-shadow: 0 1px 0 rgb(190,190,190), 0 2px 0 rgb(185,185,185), 0 3px 0 rgb(180,180,180), 0 4px 0 rgb(175,175,175), 0 5px 0 rgb(170,170,170), 0 6px 0 rgb(165,165,165), 0 7px 0 rgb(160,160,160), 0 8px 0 rgb(155,155,155), 0 9px 0 rgb(150,150,150), 0 0 10px rgba(0,0,0,0.30), 0 0 25px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.20), 0 0 75px rgba(0,0,0,0.15), 0 0 100px rgba(0,0,0,0.10); } </style> </head> <body> <div class="test">TEST</div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var minShadow = 5; var maxShadow = 150; var minStrength = 0.1; var maxStrength = 0.15; var deintensify = 1.5; function calculateShadows(calcX,calcY) { if(calcX > 1) { calcX = 1; } if(calcX < -1) { calcX = -1; } if(calcY > 1) { calcY = 1; } if(calcY < -1) { calcY = -1; } var shadows = ""; // First set of shadows give the 3D effect to the text. for (var i = 1; i < 10; i++) { shadows += i == 1 ? "" : ", "; shadows += "0 " + i + "px 0 rgb("+ (195 - i * 5) + "," + (195 - i * 5) + "," + (195 - i * 5) + ")"; } // Second set of shadows controlled by mouse position or device tilt for (var j = minShadow; j < maxShadow; j *= deintensify) { var opacity = maxStrength - (j - minShadow) / maxShadow * (maxStrength - minStrength); shadows += ", " + (calcX * j) + "px " + (calcY * j + 5) + "px " + j + "px rgba(0,0,0," + opacity + ")"; // shadows += j < 100 ? ", " : ""; } console.log(shadows); return shadows; } if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i)) { window.addEventListener('mousemove',function(e) { var baseX = (e.x - window.innerWidth / 2) * -1; var baseY = (e.y - window.innerHeight / 2) * -1; $('.test').css('text-shadow', calculateShadows(baseX/(window.innerWidth / 2),baseY/(window.innerHeight / 2))); }); } else { window.addEventListener('deviceorientation',function(e){ var sensitivity = 15; var baseX = e.gamma; var baseY = e.beta; $('.test').css('text-shadow', calculateShadows(baseX/sensitivity,baseY/sensitivity)); }); } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 动态文字阴影