效果如下：

代码如下：

 <!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. HashMap 和 Hashtable 的 6 个区别

    HashMap 是非常重要且常用的一种集合,还有一个和它类似的集合即Hashtable,有必要知道它们之间的区别. 1.线程安全: Hashtable 是线程安全的,HashMap 则不是线程安全的. ...

  2. Linux 下 MySQL-5.6.16 安装

    转载请注明出处!!!! 卸载mysql 1 查找以前是否装有 mysql 命令:rpm -qa|grep -i mysql 2 将所有包删除 删除命令:rpm -e --nodeps  包名 3 删除 ...

  3. .net基础学java系列（二）IDE

    上一篇文章.net基础学java系列(一)视野 废话: "视野"这篇文章,管理员说它比较空洞!也许初学者看不懂表格中的大部分内容!多年的neter估计也有很多不知道的! 有.net ...

  4. python vs vscode问题汇总

    最近在学工程目录章节的时候遭遇了个把 vscode目录管理 造成的问题, 当然第一大原因是: 初学者使用vscode的时候没有将环境设置好..... 闹了好几天的脾气, 这两天才整理好..... 这事 ...

  5. js/jQuery使用过程中常见问题/已踩过的坑大杂烩

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

  6. iOS报错：linker command failed with exit code 1 (use -v to see invocation) 问题解决方式之一

    百度库原版本:3.2.1  更新为:4.2.0,两个库相隔2年时间: 问题i: 更新CocoaPods的同时更新了百度地图库的版本,运行程序报错: linker command failed with ...

  7. [转]玩转图片Base64编码

    转自:[前端攻略]:玩转图片Base64编码 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 ...

  8. 第k个素因子只有3 5 7 的数

    题目描述 有一些数的素因子只有3.5.7,请设计一个算法,找出其中的第k个数. 给定一个数int k,请返回第k个数.保证k小于等于100. 测试样例: 3 返回:7 int findKth(int ...

  9. 信息学奥赛辅导经验谈 & 问题教学法中的学生思维能力培养

    转载来自朱全民名师工作室 信息学奥赛辅导经验谈 全国青少年信息学奥林匹克分区竞赛(简称NOI)是经中国科协.国家教育部批准,由中国计算机学会主办的一项全国性的青少年学科竞赛活动.随着信息学奥林匹克竞赛 ...

  10. FTP连接虚拟主机响应220 Welcome to www.net.cn FTP service. (解决的一个问题)

    问题场景: 使用FTP客户端连接虚拟主机时,同样的账号密码在有的网络下可以连接成功,有的网络下却一直连接不上:ftp响应“220 Welcome to www.net.cn FTP service.” ...