博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

CSS3 阴影模拟灯照效果

Posted on 2017-06-29 10:30  PHP-张工  阅读(862)  评论(0)  编辑  收藏  举报

效果如下：

代码如下：

 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>