效果如下：

代码如下：

  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 阴影模拟灯照效果的更多相关文章

  1. 结合 CSS3 & Canvas 模拟人行走的效果

    HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...

  2. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  3. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

  4. css3 模拟标牌震荡效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  6. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  7. 【转】 CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  8. CSS3阴影 box-shadow的使用

      text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[ins ...

  9. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

随机推荐

  1. elasticsearch的CPU居高不下的问题

    最近项目中遇到一个令人头疼的问题,毕竟因为工作需要刚学elasticsearch,也没有去关注elasticsearch的配置问题,安装好默认把它当做数据库一样去使用,这导致接下来的项目直接挂掉... ...

  2. bzoj 2599

    还是点对之间的问题,果断上点分治 同样,把一条路径拆分成经过根节点的两条路径,对不经过根节点的路径递归处理 然后,我们逐个枚举根节点的子树,计算出子树中某一点到根节点的距离,然后在之前已经处理过的点中 ...

  3. 网络流24题——魔术球问题 luogu 2765

    题目描述:这里 这道题是网络流问题中第一个难点,也是一个很重要的问题 如果直接建图感觉无从下手,因为如果不知道放几个球我就无法得知该如何建图(这是很显然的,比如我知道 $1+48=49=7^2$ ,可 ...

  4. SQL对某个字段进行排名

    SELECT ( ) AS rowno, a.badge,a.NAME,a.direct_evaluate_rate,a.view_rate FROM ( SELECT * FROM `hrs_sta ...

  5. echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕

    -------tip1-------- 在 tooltip  里边配置:拼接字符串: tooltip : { trigger: 'axis', formatter:function(params) { ...

  6. ios访问web页面<div>点击事件不起效果，以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...

  7. MIUI9系统怎么卡刷开发版获取ROOT超级权限

    小米的设备不同手机型号一般情况下官方网站都提供两个不同的系统版本,大概可分为稳定版和开发版,稳定版没有提供ROOT权限管理,开发版中就支持了ROOT权限,很多情况下我们需要使用的一些功能强大的工具,都 ...

  8. 百度 Javascript开发 API

    一.在手机wap上滑动地图,标准点在最中心位置 map.getCenter() 1.当移动地图时,点同时移动,获取屏幕中心点 <!DOCTYPE html> <html> &l ...

  9. 异步简析之BlockingCollection实现生产消费模式

    目前市面上有诸多的产品实现队列功能,比如Redis.MemCache等... 其实c#中也有一个基础的集合类专门用来实现生产/消费模式 (生产模式还是建议使用Redis等产品) 下面是官方的一些资料和 ...

  10. pwn学习之二

    刚刚开始学习pwn,记录一下自己学习的过程. 今天get了第二道pwn题目的解答,做的题目是2017年TSCTF的easy fsb,通过这道题了解了一种漏洞和使用该漏洞获取shell的方法:即格式化字 ...