CSS3 阴影模拟灯照效果

 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; i100; i++)
28 {
29     $(‘#divMain‘).append(o.clone());
30 }
31 
32 // 随机颜色
33 $(‘.txt-shadow‘).each(function(){
34     var color = ‘#‘+(‘00000‘+(Math.random()*0x10000000).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>