效果如下：

代码如下：

 <!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. Lesson 3-1（语句：条件语句）

    3.1 条件语句:if 语句 3.1.1 if 语句组成 --- if 语句包含:if 关键字.条件.冒号.if 子句(缩进代码块). --- if 语句表达的意思为:如果条件为真(True),执行后 ...

  2. 如何在Django中配置MySQL数据库

    直接上图 在项目中直接找到settings 文件 第一步       原始Django自带数据库 第二步将配置改成MySQL的数据 第三步  在__init__文件中告知Django使用MySQL数据 ...

  3. Leetcode 992 Subarrays with K Different Integers

    题目链接:https://leetcode.com/problems/subarrays-with-k-different-integers/ 题意:已知一个全为正数的数组A,1<=A.leng ...

  4. JMeter 测试中，使用 JDBC 查询条件为中文时解决办法

    在 JMeter 的 jdbc 链接配置插件上,连接 mysql 的 url上加useUnicode=true&characterEncoding=UTF-8即可解决问题.

  5. 【玩转开源】BananaPi R2 —— 第四篇 Openwrt Luci 初探

    什么是Luci呢?先直观的感受一下,打开web浏览器,输入R2的网关地址,然后出现了一个web登录界面,这个就是Openwrt Luci的应用. 那么到底什么是Luci呢?在这里我先给大家一个公式:L ...

  6. sql父子表结构，常用脚本

    在实际运用中经常会创建这样的结构表Category(Id, ParentId, Name),特别是用于树形结构时(菜单树,权限树..),这种表设计自然而然地会用到递归,若是在程序中进行递归(虽然在程序 ...

  7. linux su失败：无法设置用户ID:资源暂时不可用

    环境 linux RHEP 7.+ su - user 提示 :无法设置用户ID,资源暂时不可用 检查 cat /etc/security/limits.d/90-nproc.conf * soft ...

  8. apache atlas源码编译打包 centos

    参考:https://atlas.apache.org/InstallationSteps.html https://blog.csdn.net/lingbo229/article/details/8 ...

  9. Linux-硬件

    1.服务器 计算节点服务器-用于后台逻辑运算,所以cpu,磁盘读写性能要求较高 web服务器-用于用户请求访问一些页面,如果高并发,磁盘读写性能要好,可以使用raid0或raid1或raid5技术(r ...

  10. 在WINDOWS中安装使用SIGPACK（MinGW64+Sublime Text3 &Visual Studio）

    本文介绍在Windows下安装使用SigPack库,涉及Armadillo.OpenBLAS安装使用说明,最终实现对SigPack示例CPP基于MinGW64在Sublime Text3下的编译运行, ...