当前位置: 首页 > 编程日记 > 正文

php发光字体代码,CSS3怎么实现字体发光效果

这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下。

博客页面左上角的“猿来是勇者”文字已制作发光效果,分享方法如下:

该属性为文本添加阴影效果text-shadow:h-shadow v-shadow blur color;

h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值,必需

v-shadow: 垂直阴影的位置(阴影垂直偏移量),可为负值,必需

blur: 阴影模糊的距离(默认为0),可选

color: 阴影颜色(默认为当前字体颜色),可选

乍一看,text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。

其实不然,这正是 text-shadow 属性的精妙之处。

当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了

这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

当然,为了使外发光更加酷炫,还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)

代码实例

HTML Code

xinpureZhu

CSS Codebody {

background: #000;

}

.container {

width: 600px;

margin: 100px auto 0;

}

p {

font-family: 'Audiowide';

text-align: center;

color: #00a67c;

font-size: 7em;

-webkit-transition: all 1.5s ease;

transition: all 1.5s ease;

}

p:hover {

color: #fff;

-webkit-animation: Glow 1.5s ease infinite alternate;

animation: Glow 1.5s ease infinite alternate;

}

@-webkit-keyframes Glow {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #00a67c,

0 0 70px #00a67c,

0 0 80px #00a67c,

0 0 100px #00a67c,

0 0 150px #00a67c;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #00a67c,

0 0 35px #00a67c,

0 0 40px #00a67c,

0 0 50px #00a67c,

0 0 75px #00a67c;

}

}

@keyframes Glow {

from {

text-shadow: 0 0 10px #fff,

0 0 20px #fff,

0 0 30px #fff,

0 0 40px #00a67c,

0 0 70px #00a67c,

0 0 80px #00a67c,

0 0 100px #00a67c,

0 0 150px #00a67c;

}

to {

text-shadow: 0 0 5px #fff,

0 0 10px #fff,

0 0 15px #fff,

0 0 20px #00a67c,

0 0 35px #00a67c,

0 0 40px #00a67c,

0 0 50px #00a67c,

0 0 75px #00a67c;

}

}

效果示图

a8401ce92dba2a8d402f75e4e82504ef.gif

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

相关文章:

计算机专业英语chapter012,计算机专业英语 chapter_1.ppt

计算机专业英语 chapter_1Chapter 1 Information Technology, The Internet, and You;Competencies;Competencies能力,要求After you have read this chapter, you should be able to: Explain the five parts of an information system: people, procedures, softw…

C#与C++的区别

1,C#不支持多重继承,这是与C明显区别的地方,说真的多重继承有时候用起来挺麻烦的,可能微软怕你用不好吧,不给你提供了,但我个人觉得没有了多重继承感觉有点可惜。 2.在标准的C#安全代码中不支持指针类型的操作&#xf…

黑裙安装linux环境,Linux学习笔记(一) ---- 安装Linux系统

学习Linux的第一件事情,你得先有个Linux系统,才能知道怎么学吧?于是安装Linux是第一部,找网上找了不少教程,自己总结了一下,些一个博文先。我安装的Linux是在VMWare 7.2版本上安装的,安装的是Ret Hat Linux…

mybatis批量更新的两种实现方式

mapper.xml文件&#xff0c;后台传入一个对象集合&#xff0c;另外如果是mysql数据库&#xff0c;一点在配置文件上加上&allowMultiQueriestrue&#xff0c;这样才可以执行多条sql&#xff0c;以下为mysql&#xff1a; <update id"batchUpdate" parameterType…

php常用20函数,PHP常用函数

//PHP设置跨域header("Access-Control-Allow-Origin:*");//PHP设置JSON头 以JSON格式输出header("Content-type:application/json; charsetutf-8");//正则取字符串preg_match_all(/字符串(.*?)字符串/i,$data,$out);// PHP把JSON对象转字符串不转码输出js…

tcpdump保存数据包

1、启动tcpdump tcpdump 2、查看网卡 tcpdump -D 3. 抓取报文后隔指定的时间保存一次 tcpdump -i eth3 -s0 -G 60 -Z root -w %Y_%m%d_%H%M_%S.pcap 这里解释下-G选项 后面接时间 单位为秒 本例中的时间为60秒 4. 抓取报文后达到指定的大小保存一次 tcpdump -i eth3 -s0 -C 1 -…

在线翻译系统属于计算机应用领域中,【单选题】网状物编织物和机件上的滚花部分,可以在轮廓线附件用( )线示意画出...

参考答案如下单选【简答题】我决定明天五点起床。(ことになる・ことにする)题网【单选题】法律的规定:邀请招标,应向()个以上具备承担招标项目能力,资信良好的特定法人发出投标邀请书。状物轮【单选题】描述液体运动的方法不包括( )。编织部分【单选题】Everyone _________ on …

linux进行主机发现,linux – 网络上所有计算机的主机名发现

SSH不关心是否给出了要连接的主机名或IP地址(当有特定于主机的配置时,不确定是否适用).大多数MPI实现也不关心,例如在Open MPI连接中,URI地址都是数字,因此具有IP的主机文件可以正常使用.另一方面,HTTP服务器关心的是虚拟主机事件,其中许多不同站点解析为相同的IP地址,但服务器…

Android5.0之CoordinatorLayout的使用

CoordinatorLayout&#xff0c;中文译作协调者布局&#xff0c;光听这名字你可能很难判断出协调者布局有什么特点&#xff0c;那么我们来看看下面一张图片&#xff1a; 由于CSDN对图片大小的要求&#xff0c;我只能录制一个快速播放的动画&#xff0c;请大家见谅。但是显示效果…

微信js sdk动态引用

一般情况下&#xff0c;微信的js-sdk只需要直接引用script即可 <script src"http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 但是有的时候&#xff0c;当我们的网页访问的环境多样的时候&#xff0c;比如APP内部&#xff0c;手机浏览器时候&…

java qq协议 c#,C# WebQQ协议群发机器人(三)

在前两篇文章中我已经给了绝大部分的WEBQQ的操作在这篇文章中不在过多的说明做法有的时候需要自己添加一些功能呢 怎么做呢&#xff0c;我这里给出一个方法。在调试webqq机器人时 我用google浏览器 的F12开发者工具来捕捉网络包&#xff0c;webqq绝大多数都是GET请求 参数用来用…

矩阵计算在计算机科学中,开发者必读:计算机科学中的线性代数(附论文)

来源&#xff1a;机器之心作者&#xff1a;Petros Drineas、Michael W. Mahoney本文共3994字&#xff0c;建议阅读6分钟。本文为你分享一篇来自普渡大学与UC Berkeley两位教授的概述论文中的线性代数知识。矩阵计算在计算机科学中占有举足轻重的地位&#xff0c;是每个开发者都…

linux blfs安装桌面,【Linux】Ubuntu14.04安装bridge-utils安装brctl

1、下载bridge-utils http://www.linuxfromscratch.org/blfs/view/svn/basicnet/bridge-utils.html2、放到/usr/src 目录下输入&#xff1a;su以root运行输入&#xff1a;cp /home/joanna/桌面/bridge-utils-1.5.tar.gz /usr/src/bridge-utils-1.5.tar.gzbridge-utils拷贝到/…

HTML5左取函数,Javascript常用方法函数收集(一)

本文中&#xff0c;收集了一些比较常用的Javascript函数&#xff0c;希望对学习JS的朋友们有所帮助。1.字符串长度截取function cutstr(str, len) {var temp,icount 0,patrn /[^\x00-\xff]/&#xff0c;strre "";for (var i 0; i < str.length; i) {if (icoun…

智能指针unique_ptr

unique_ptr的一些操作&#xff1a; int main() {unique_ptr<int> uptr(new int(10));//unique_ptr<int> uptr2(uptr);//报错//unique_ptr<int> uptr3 uptr;//报错unique_ptr<int> uptr2 std::move(uptr);//转移所有权//cout << *uptr <<…

java 设计一个geometricobject类,geometricobject类

(2) Circle 类和 Rectangle 类是 GeometricObject 类的子类,其中应实现 父类的抽象方法。 (3) 程序主方法中创建两个几何对象,一个圆和一个矩形,并用 ......创建一个元素是 GeometricObject 类型的数组: ?GeometricObject[] geo new GeometricObject[10]; 8 使用 GeometricOb…

linux 源码安装浏览器,vps+linux+安装浏览器

弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器&#xff0c;帮助用户打造可靠、安全、灵活、高效的应用环境&#xff0c;确保服务持久稳定运行&#xff0c;提升运维效率三年低至5折&#xff0c;多种配置可选了解详情什么是弹性…

计算机基础及应用教案,计算机应用基础教案:数制的概念及转换(中职教育)

计算机应用基础教案&#xff1a;数制的概念及转换(中职教育) (6页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;9.9 积分课题&#xff1a;数制的概念及转换教学目标&#xff1a;1、了解和学握计算机…

博客园第一天,开放封闭原则

&#xff08;以下内容来自网络&#xff0c;只为加深理解&#xff09; 开放封闭原则 软件实体软件实体应该是可扩展&#xff0c;而不可修改的。 开放&#xff1a;扩展 封闭&#xff1a;修改 对扩展开放意味着在又新的需求或变化时&#xff0c;可以对代码进行扩展&#xff0c;以适…

centos6.5 php5.2,Linux中PHP安装与配置(CentOS-6.5:php-5.2.13)

1 PHP简介 PHP(PHP: Hypertext Preprocessor的缩写&#xff0c;中文名&#xff1a;“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点&#xff0c;入门门槛较低&#xff0c;易于学习&#xff0c;使用广泛&#xff0c;主要适用于Web开发领域。…

Oracle中分页查询语句

Oracle分页查询语句使我们最常用的语句之一&#xff0c;下面就为您介绍的Oracle分页查询语句的用法&#xff0c;如果您对此方面感兴趣的话&#xff0c;不妨一看。 Oracle分页查询语句基本上可以按照本文给出的格式来进行套用。Oracle分分页查询格式&#xff1a; SELECT * FROM …

大一c语言大作业课题大全,昆明理工大学大一C语言大作业题目.doc

昆明理工大学大一C语言大作业题目综合性实践排序求平均值(包括将数拆散求最大最小值)。函数ReadDat()随机产生100个存放到数组aa中00个jsSort()函数的功能是&#xff1a;进行降序排列。最后调用函数WriteDat()函数函数ReadDat()00个四位数存入数组a中&#xff0c;函数jsValue()…

1 项目里面如何打印log日志

1 首先写一个logging.py文件 import logging from conf import setting #配置文件&#xff0c;里面有日志存放路径def mylog():logger logging.getLogger()# 吸星大法# 先创造一个格式formatter logging.Formatter(%(asctime)s - %(name)s - %(levelname)s - %(message)s)#…

计算机应用主要设计到哪些方面,大学计算机应用基础教案设计.doc

大学计算机应用基础教案教 师&#xff1a; 腾莉单 位&#xff1a; 数学计算机学院2009 ~ 2010学年第一讲 计算机基础知识概述【教学目的】了解计算机概念、特点、发展历程、类型应用领域等基本知识计算机基本概念和分类计算机一、计算机的概念计算机(computer)是一种能自动、高…

php点击复制按钮到我的粘贴板,JS 实现点击按钮复制内容到粘贴板 clipboard

具体实现如下:点击按钮复制内容到粘贴板body {text-align: center;}#p1 {line-height: 150px;font-size: 40px;}#source {font-size: 18px;}.wrapper {margin-top: 50px;}.btn {width: 300px;height: 120px;background-color: #4da2fd;color: #fff;font-size: 20px;text-decora…

透明代理Transparent Proxy

透明代理Transparent Proxy透明代理Transparent Proxy类似于普通代理&#xff0c;它可以使得处于局域网的主机直接访问外网。但不同之处&#xff0c;它不需要客户端进行任何设置。这样&#xff0c;客户端误以为是直接连接的外网主机&#xff0c;所以称为透明代理。由于客户端没…

C语言case次数有限制吗,用switch...case语句统计数字、空格和其他字符出现的次数...

//用switch...case语句统计数字、空格和其他字符出现的次数//转自K&R#include int main(void){int c, i, nwhite, nother, ndigit[10];nwhite nother 0;for (i 0; i < 10; i)ndigit[i] 0;while ((c getchar()) ! EOF){switch (c){case 0: case 1: case 2: case 3: …

C++——简单数据类型及布尔类型

一. 简单数据类型 数据类型描述了对象在内存存储区中占据的空间大小&#xff0c;描述了对象能够表示的数据范围 和类型。C语言中常用的数据类型有整型、实型、字符型&#xff08;这3种类型也被称之为简单数 据类型&#xff09;、数组类型、布尔类型、枚举类型、结构体类型、公用…

document.onclick在ios上不触发的解决方法与touchstart点击穿透处理

document.onclick function (e) {var e e ? e : window.event;var tar e.srcElement || e.target;if (tar.id ! "searchData") {pagesZone.style.display "none";} } 以上代码在电脑浏览器和安卓上都能触发alert事件&#xff0c;但是在iOS上却完全没有…

php广告插入代码,[教程]如何在phpcms中添加html代码广告

像上次说的那样&#xff0c;phpcms里直接生成的js文件是不能包含html代码的。本文介绍的还是利用上次所用的ads循环和phpcms自带的文本广告&#xff0c;新建一个支持html代码的模板&#xff0c;从而达到支持html广告的效果。这样设置以后&#xff0c;phpcms可以支持大部分的广告…