每日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. jQuery 第五章 实例方法 详解动画之animate()方法

    .animate()   .stop()   .finish() ------------------------------------------------------------------- ...

  2. Python正则表达式大全

    前言 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...

  3. 记录一下超大list引起oom

    1.2g的堆内存 比较大的对象20w个,oom

  4. VisualStudio C++使用汇编函数

    Visual Studio编写C++代码使用汇编函数 新建空项目 新建如下源文件 ;test.asm ;测试函数 三个数相加 ;.386 .model flat, c ;public test_ .c ...

  5. 2020.11最新JAVA环境安装配置

    Windows10下java环境配置 更新:2020年11月25日 电脑环境: windows10 64位 一.下载jdk 首先到Oracle网站下载对应操作系统的jdk安装包. https://ww ...

  6. ios真机使用fixed定位页面滚动时fixed定位的元素也会跟着滚动

    到了ios真机APP中,页面向下滚动,fixed的元素也跟着滚,虽然最后它还是到了它该在的地方,但是它跟着滚动也很影响页面的流畅性和交互性好伐.

  7. java17(面向对象)

    1.面向过程:所有事情都是按顺序一件件做,未知主体 买菜,做饭,吃饭,洗碗 面向对象:将功能封装到对象之中,让对象去实现功能 去饭馆,告诉服务员要吃啥,然后等着端上来. 面向对象的目的: 复杂的东西简 ...

  8. Spring Boot 2 集成 Swagger

    本文测试代码使用 Spring Boot 2.1.6.RELEASE + Swagger 2.9.2 添加依赖 <dependency> <groupId>io.springf ...

  9. c++11-17 模板核心知识（十三）—— 名称查找与ADL

    名称分类 名称查找 ordinary lookup ADL (Argument-Dependent Lookup) 官网的例子 ADL的缺点 在C++中,如果编译器遇到一个名称,它会寻找这个名称代表什 ...

  10. 第8.7节 Python类__new__方法和构造方法关系深入剖析：__new__方法执行结果对__init__的影响案例详解

    一. 引言 前面章节介绍了类中的构造方法和__new__方法,并分析了二者执行的先后顺序关系.__new__方法在__init__方法前执行,__new__方法执行后才返回实例对象,也就是说__new ...