用html和css实现字体发光效果

css部分:

 *{/* 页面内外边距初始化 */margin: 0;padding: 0;}.text{/* 100%的窗口高度 */height: 100vh;display: flex;justify-content: center;align-items: center;background-color: slateblue;}span{font-size:100px;font-weight: 700;color:yellow;/* 转换为大写 */text-transform: uppercase;/* 字间距 */letter-spacing: 6px;/* 模糊滤镜 */filter: blur(2px);/* 执行动画 */animation:trans  3s linear infinite;}/* 定义动画 */@keyframes trans{0%,100%{color: yellow;filter: blur(2px);/* 文字阴影 */text-shadow:0 0 10px  lightgreen,0 0 20px  lightgreen,0 0 30px  lightgreen,0 0 40px  lightgreen,0 0 100px  lightgreen,0 0 200px  lightgreen,0 0 300px  lightgreen,0 0 400px  lightgreen;}5%,95%{color:skyblue;filter: blur(0px);text-shadow: none;}}/* 为每一个span标签设置动画延迟时间 */span:nth-child(1){animation-delay: 0s;}span:nth-child(2){animation-delay: 0.6s;}span:nth-child(3){animation-delay: 1.2s;}span:nth-child(4){animation-delay: 1.8s;}span:nth-child(5){animation-delay: 2.4s;}span:nth-child(6){animation-delay: 3.0s;}

html部分:

 <div class="text"><span>h</span><span>i</span><span>w</span><span>e</span><span>b</span></div>

页面效果图:

用html和css实现字体发光效果相关推荐

CSS 实现字体发光效果 text-shadow
一.CSS字体发光效果: CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果 1.text-shadow:该属性为文本添加阴影效果. text-shadow: h-s ...
php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
html字体荧光效果,CSS3字体发光效果
CSS3 并没有直接设置发光效果的属性,但是可以利用 text-shadow 属性实现此效果 text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shad ...
php发光字体代码,CSS3实现字体发光效果（代码实例）
本文给大家介绍CSS3如何实现字体发光效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. text-shadow 该属性为文本添加阴影效果text-shadow: h- ...
纯CSS发光动效-CSS制作logo发光效果
纯CSS发光动效-CSS制作logo发光效果这里是html部分,复制进去就能用很简单 <div class="logo-nav"><a href="# ...
CSS实现字体荧光效果
CSS中为我们提供了 text-shadow 属性,该属性有4个参数分别为:水平偏移量,垂直偏移量,阴影范围,阴影颜色最重要的是,一个字体同时可以拥有多个阴影,只需要用逗号分隔即可(通过不同范围的 ...
UILabel设置字体发光效果
1.新建一个继承自UILabel的类 2.在这个类中定义red.green.blue三个颜色值变量和一个发光范围变量glowSize. 3.重写UILable的drawTextInRect方法,并使用 ...
css loading 字体动画效果,CSS实现四种loading动画效果
四种加载效果 /*第一种*/.demo1 { 4px; height: 4px; border-radius: 2px; background: #68b2ce;float: left; margin ...
php 文字描边,css怎么实现字体描边效果
css实现字体描边效果的方法:可以利用text-stroke属性来实现字体描边效果,如[-webkit-text-stroke:6px transparent;].text-stroke属性常配合te ...
css 边缘闪光_CSS 文字发光效果
CSS 文字的发光效果通过 text-shadow 实现起来很方便的. text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 0 -1px 1px #8 ...

用html和css实现字体发光效果

用html和css实现字体发光效果相关推荐

最新文章

热门文章