效果如下：

代码如下：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="renderer" content="webkit">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>CSS3 文字光照效果</title>

 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

 <style>

 .txt-shadow

 {

 text-align:center; font-size:80px; font-weight:bold; margin:10px; float:left; color:#fff;

 color:#fff;

 }

 </style>

 </head>

 <body>

 <div id="divMain">

 <div class="txt-shadow">

 ●

 </div>

 </div>

 <script>

 var o = $('.txt-shadow').eq(0);

 for (var i=0; i<100; i++)

 {

     $('#divMain').append(o.clone());

 }

 // 随机颜色

 $('.txt-shadow').each(function(){

     var color = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);

     $(this).css('color', color);

 });

 // 监控鼠标移动

 $(document).mousemove(function(e) {

     var mx = e.originalEvent.x || e.originalEvent.layerX || 0;

     var my = e.originalEvent.y || e.originalEvent.layerY || 0;

     mx += $(document).scrollLeft();

     my += $(document).scrollTop();

     $('.txt-shadow').each(function(){

         // 根据鼠标位置偏移量，计算阴影大小

         var pos = $(this).offset();

         var x = pos.left + ($(this).width()/2) - mx;

         var y = pos.top + ($(this).height()/2) - my;

         var l = Math.sqrt(x*x + y*y);

         var css = '' + x / 50 + 'px ' + y / 50 + 'px ' + l / 50 + 'px #666';

         $(this).css('text-shadow', css);

         // 距离越远越透明

         l = Math.max((500 - l) / 500, 0.3);

         $(this).css('opacity', l);

         // 距离越远越模糊

         $(this).css('-webkit-filter', 'blur(' + (1 - l) * 2 + 'px)');

     });

 });

 </script>

 </body>

 </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. bzoj 2599

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

  2. Dubbo序列化多个CopyOnWriteArrayList对象变成同一对象的一个大坑!!

    环境: win10 + jdk 1.8 + dubbo 2.5.10 问题描述: 当一个对象(此对象内包含多个CopyOnWriteArrayList对象) 作为参数调用RPC接口后, 服务提供者拿到 ...

  3. Angular2 ng2 如何配置惰性加载

    需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...

  4. Linux计划任务及压缩归档

    计划任务介绍 自动执行,备份数据. crontab    和   at : at:它是一个可以处理仅执行一次就结束的指令 crontab:它是会把你指定的工作或任务,比如:脚本等,按照你设定的周期一直 ...

  5. IE外挂

    //引用 Windows/system32/Shell32.dll //引用COM组件 shdocvw.dll (Microsoft Internet Controls) //引用COM组件 msht ...

  6. 土制Excel导入导出及相关问题探讨

    转载请注明出处https://www.cnblogs.com/funnyzpc/p/10392085.html 新的一年,又一个开始,不见收获,却见年龄,好一个猪年,待我先来一首里尔克的诗: < ...

  7. 20181125第二章节总结part3

    数据-元祖 元祖的是可存放多个值,不可变,有顺序的,从左向右编号. 作用是可以用来存储一些不可以更改的配置文件 基本 语法: #创建新元祖 tuple = (,,,,,) #索引,写法同list tu ...

  8. ubuntu 14.04 安装 rabbitmq

    1. sudo apt-get update 安装rabbitmq 2. sudo apt-get install rabbitmq-server 添加用户 3. sudo rabbitmqctl a ...

  9. js 事件模型详解

    把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...

  10. matlab安装 macos

    http://pan.baidu.com/s/1o6qKdxo内附安装说明Matlab R2014A Mac & Linux 破解版 readme文件有流程!可以安装