CSS3 陰影模擬燈照效果
阿新 • • 發佈：2017-06-29
style ont content sca erer logs origin set web
效果如下：
代碼如下：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="renderer" content="webkit"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>CSS3 文字光照效果</title> 9 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 10 <style> 11 .txt-shadow 12 { 13 text-align:center; font-size:80px; font-weight:bold; margin:10px; float:left; color:#fff; 14 color:#fff; 15 } 16 </style>17 </head> 18 <body> 19 <div id="divMain"> 20 <div class="txt-shadow"> 21 ● 22 </div> 23 </div> 24 25 <script> 26 var o = $(‘.txt-shadow‘).eq(0); 27 for (var i=0; i<100; i++) 28 { 29 $(‘#divMain‘).append(o.clone()); 30 } 31 32 // 隨機顏色 33 $(‘.txt-shadow‘).each(function(){ 34 var color = ‘#‘+(‘00000‘+(Math.random()*0x1000000<<0).toString(16)).slice(-6); 35 $(this).css(‘color‘, color); 36 }); 37 38 // 監控鼠標移動 39 $(document).mousemove(function(e) { 40 var mx = e.originalEvent.x || e.originalEvent.layerX || 0; 41 var my = e.originalEvent.y || e.originalEvent.layerY || 0; 42 mx += $(document).scrollLeft(); 43 my += $(document).scrollTop(); 44 45 $(‘.txt-shadow‘).each(function(){ 46 // 根據鼠標位置偏移量，計算陰影大小 47 var pos = $(this).offset(); 48 var x = pos.left + ($(this).width()/2) - mx; 49 var y = pos.top + ($(this).height()/2) - my; 50 var l = Math.sqrt(x*x + y*y); 51 var css = ‘‘ + x / 50 + ‘px ‘ + y / 50 + ‘px ‘ + l / 50 + ‘px #666‘; 52 $(this).css(‘text-shadow‘, css); 53 54 // 距離越遠越透明 55 l = Math.max((500 - l) / 500, 0.3); 56 $(this).css(‘opacity‘, l); 57 58 // 距離越遠越模糊 59 $(this).css(‘-webkit-filter‘, ‘blur(‘ + (1 - l) * 2 + ‘px)‘); 60 }); 61 }); 62 </script> 63 64 </body> 65 </html>
CSS3 陰影模擬燈照效果