每日CSS_发光文本效果

2020_12_22

源码

1. 代码解析

1.1 html 代码片段

<h1>

  <span>今</span>

  <span>天</span>

  <span>你</span>

  <span>开</span>

  <span>心</span>

  <span>吗</span>

</h1>

在里面定义6个字, 分别用不同的 span 表示, 供单个使用

1.2 css 代码片段

  1. 首先对 body 进行初始化
body{

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background: #000;

  font-family: 幼圆, cursive;

}

​ 在 body 中设置布局方式为 flex, 将内容居中显示, 设置高度为 100%, 宽度为 auto , 自然为 100%, 背景设为黑色.

  1. 初始化字体颜色及大小
h1{

  margin: 0;

  padding: 0;

  color: #111;

  font-size: 10em;

}

​ 设置字体颜色为 #111, 效果如下

  1. 设置动画和字体摆放方式
h1 span{

  display: table-cell;

  margin: 0;

  padding: 0;

  animation: animate 2s linear infinite;

}

​ 设置了摆放方式是 table-cell , 字体更加紧密并且间距相同, 设置动画, 线性无限放.

  1. 动画设置
@keyframes animate {

  0%, 100%{

    color: #ffffff;

    filter: blur(2px);

    text-shadow: 0 0 10px #5655ff,

                0 0 20px #5655ff,

                0 0 40px #5655ff,

                0 0 80px #5655ff,

                0 0 120px #5655ff,

                0 0 200px #5655ff,

                0 0 300px #5655ff,

                0 0 400px #5655ff;

  }

  5%, 95%{

    color: #111;

    filter: blur(0px);

    text-shadow: none;

  }

}

​ 设置动画, 每个字体的变化方式是从白色到暗黑再到白色, 使用 blur 实现了模糊效果, 效果如下

  1. 轮流开始播放动画
h1 span{

  display: table-cell;

  margin: 0;

  padding: 0;

  animation: animate 2s linear infinite;

}

h1 span:nth-child(1){

  animation-delay: 0s;

}

h1 span:nth-child(2){

  animation-delay: 0.25s;

}

h1 span:nth-child(3){

  animation-delay: 0.5s;

}

h1 span:nth-child(4){

  animation-delay: 0.75s;

}

h1 span:nth-child(5){

  animation-delay: 1s;

}

h1 span:nth-child(6){

  animation-delay: 1.25s;

}

​ 共6个字, 每个字拥有一定的延时, 从第一个一直到最后一个, 每个字体显示时间是 0.25s

2. 源码

2.1 html 代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <link rel="stylesheet" href="2020_12_22.css">

</head>

<body>

<h1>

  <span>今</span>

  <span>天</span>

  <span>你</span>

  <span>开</span>

  <span>心</span>

  <span>吗</span>

</h1>

</body>

</html>

2.2 css 代码

body{

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background: #000;

  font-family: 幼圆, cursive;

}

h1{

  margin: 0;

  padding: 0;

  color: #111;

  font-size: 10em;

}

h1 span{

  display: table-cell;

  margin: 0;

  padding: 0;

  animation: animate 2s linear infinite;

}

h1 span:nth-child(1){

  animation-delay: 0s;

}

h1 span:nth-child(2){

  animation-delay: 0.25s;

}

h1 span:nth-child(3){

  animation-delay: 0.5s;

}

h1 span:nth-child(4){

  animation-delay: 0.75s;

}

h1 span:nth-child(5){

  animation-delay: 1s;

}

h1 span:nth-child(6){

  animation-delay: 1.25s;

}

@keyframes animate {

  0%, 100%{

    color: #ffffff;

    filter: blur(2px);

    text-shadow: 0 0 10px #5655ff,

                0 0 20px #5655ff,

                0 0 40px #5655ff,

                0 0 80px #5655ff,

                0 0 120px #5655ff,

                0 0 200px #5655ff,

                0 0 300px #5655ff,

                0 0 400px #5655ff;

  }

  5%, 95%{

    color: #111;

    filter: blur(0px);

    text-shadow: none;

  }

}

每日CSS_发光文本效果的更多相关文章

  1. 每日CSS_实时时钟效果

    每日CSS_实时时钟效果 2020_12_22 源码链接 1. 代码解析 1.1 html 代码片段 <div class="clock"> <div class ...

  2. 每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...

  3. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

  4. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  5. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  6. CSS 3学习——文本效果和@font-face

    文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

随机推荐

  1. 【电子取证：FTK Imager篇】FTK Imager制作镜像详细介绍

    FTK Imager制作镜像详细介绍 以DD镜像制造为例,详细介绍了FTK Imager创建镜像的过程,记得大学的时候学习这些没什么教程,找到的资料也是语焉不详,故在此啰嗦一番---[suy] 一.磁 ...

  2. 【R语言入门】R语言中的变量与基本数据类型

    说明 在前一篇中,我们介绍了 R 语言和 R Studio 的安装,并简单的介绍了一个示例,接下来让我们由浅入深的学习 R 语言的相关知识. 本篇将主要介绍 R 语言的基本操作.变量和几种基本数据类型 ...

  3. VisualStudio 编写汇编代码相关设置

    VS编写汇编代码方法 新建空项目,不创建解决方案 项目右键,Build Customizations,选择masm 新建源文件,后缀为.ASM 编写代码 .386 ; Tells MASM to us ...

  4. 7-1 Hashing

    The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...

  5. 【服务总线 Azure Service Bus】Service Bus在使用预提取(prefetching)后出现Microsoft.Azure.ServiceBus.MessageLockLostException异常问题

    问题描述 Service Bus接收端的日志中出现大量的MessageLockLostException异常.完整的错误消息为: Microsoft.Azure.ServiceBus.MessageL ...

  6. String.Split()函数 非原创

    我们在上次学习到了 String.Join函数(http://blog.csdn.net/zhvsby/archive/2008/11/28/3404704.aspx),其中用到了String.SPl ...

  7. Integer中的奇妙位运算

    Integer中的奇妙位运算 参考资料 https://segmentfault.com/a/1190000015763941 highestOneBit(int i) 函数的作用是获得传入参数的最高 ...

  8. 卡耐基梅隆大学（CMU）元学习和元强化学习课程 | Elements of Meta-Learning

    Goals for the lecture: Introduction & overview of the key methods and developments. [Good starti ...

  9. Python中序列解包与函数的参数收集之间的关系

    在<第4.7节 Python特色的序列解包.链式赋值.链式比较>中老猿介绍了序列解包,<第5.2节 Python中带星号的函数参数实现参数收集>介绍了函数的参数收集,实际上函数 ...

  10. Python正则表达式处理中的匹配对象是什么？

    老猿才开始学习正则表达式处理时,对于搜索返回的匹配对象这个名词不是很理解,因此在前阶段<第11.3节 Python正则表达式搜索支持函数search.match.fullmatch.findal ...