效果如下：

代码如下：

 <!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. 洛谷 P2678 & [NOIP2015提高组] 跳石头

    题目链接 https://www.luogu.org/problemnew/show/P2678 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布 ...

  2. 单点登录前戏（未使用jwt版本）

    建表 from django.db import models import jwt # Create your models here. # 角色表 class RoleTable(models.M ...

  3. Python 包管理(PYPA)

    Python包的管理可以通过Python 自带的管理 工具,例如:package-autoremove,package-list-packages, package-install 等,使用起来也非常 ...

  4. 解决ODBC连接Oracle数据库报Unable to connect SQLState=08004问题

    今天用ODBC连接Oracle数据库时,报了这么一个错“Unable to connect SQLState=08004 Oracle ODBC Ora-12154”,上网查了好久都说PowerDes ...

  5. 单机MongoD搭建

    MongoD 安装 1 .下载地址: wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.6.8.tgz 2 .添加 ...

  6. mysql函数取出单个字段重新组成一维数组

    array_column():

  7. resource links

    http://cenalulu.github.io/linux/all-about-cpu-cache/

  8. oracle中nvarchar2查询结果显示总是少一位

    问题: 有个表的字段是nvarchar2(32),但是在plsql中查询显示结果发现一直少一位. 修改方法: 在plsql里的首选项-连接里有个选项: 在oci8上强制使用oci7, 把这个勾上就ok ...

  9. 032 Java再次总结

    1.大纲 多线程怎么用的,线程池,事务,传播机制与隔离级别,反射,泛型,数据库引擎的区别,数据库merge,窗口函数,fastJson,JVM调优,GC钩子,Linux的awk,shell,HashM ...

  10. 关于使用spring版本4.1.6注解@Import报错

    记录一下遇到的错误 org.springframework.beans.factory.parsing.BeanDefinitionParsingException: 使用环境:spring 4.1. ...