首页 > 代码库 > CSS3 阴影模拟灯照效果

CSS3 阴影模拟灯照效果

2024-10-13 17:25:39   213人阅读

效果如下：

技术分享

代码如下：

 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-shadow12 {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 阴影模拟灯照效果


联系
我们