效果如下：

代码如下：

 <!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. laravel call传参

    public function index(Request $request, ApplicationContract $app) { $type = $request->query('type ...

  2. 设计模式 — 抽象工厂模式（Abstract Factory）

    工厂模式已经分析了简单工厂模式和工厂方法模式.并且了解了工厂方法模式去简单工厂模式的延伸,工厂方法模式如果不把工厂类抽象的话,就是简单工厂模式.由前面两个工厂模式可以猜测出抽象工厂模式应该是这两种工厂 ...

  3. Charles SSL

    1 enable SSL 2 chls.pro/ssl  to install certificate 3 General -> About -> Certificate Trust Se ...

  4. 在GNU/Linux下制作Windows 10安装U盘

    今年春节回家期间,我需要将家里的一台安装了Debian Stretch的ZaReason笔记本电脑更换为Windows 10系统,好让爸妈从老台式机上的XP系统升级到新的平台上来.回家前,小仙女已在微 ...

  5. PHP实现url参数组合字符串与数组相互转换

    $data = array( 'name' => 'tom', 'sex' => 1, 'channel' => 'ty' ); 数组转url参数字符串 $queryStr = ht ...

  6. RAID磁盘阵列及CentOS7系统启动流程

    磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意,,数据读取无影响.将数据切割成许多区段,分别存放在各个硬盘 ...

  7. 【webpack系列】从零搭建 webpack4+react 脚手架（五）

    本章节,我们一起来探讨以下问题:如何对编译后的文件进行gzip压缩,如何让开发环境的控制台输出更加高逼格,如何更好的对编译后的文件进行bundle分析等. 1 gzip压缩 如果你想节省带宽提高网站速 ...

  8. nginx代理tcp协议连接mysql

    阅读目录 一.mariadb安装及配置 1.1 在192.168.182.155安装mariadb 1.2 配置MariaDB的字符集 1.3  添加用户,设置权限 1.4 防火墙设置 二.nginx ...

  9. json随笔

    <script> var obj2={};//这只是JS对象 var obj3={width:100,height:200};/*这跟JSON就更不沾边了,只是JS的对象 */ var o ...

  10. 20165319 Exp6 信息收集与漏洞扫描

    实验过程 whois 在虚拟机Kali的终端输入命令:whois gitee.com,查询码云的域名注册信息. dig或nslookup域名查询 在kali终端输入dig 网址或nslookup 网址 ...