每日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. 使用Folx下载任务完成后，怎么自动完成关闭

    下载工具的优点是可以通过多线程的方式,提高文件的下载速度,减少用户的下载时间.但另一方面来说,下载工具为了达到高速下载,也会占据较多的带宽资源,甚至会拖慢电脑的运行. 因此,很多用户会利用电脑的空闲时 ...

  2. Jsoup获取网页内容（并且解决中文乱码问题）

    1. 根据连接地址获取网页内容,解决中文乱码页面内容,请求失败后尝试3次 private static Document getPageContent(String urlStr) { for (in ...

  3. Hadoop优化之数据压缩

    bBHadoop数据压缩 概述 运行hadoop程序时,I/O操作.网络数据传输.shuffle和merge要花大量的时间,尤其是数据规模很大和工作负载密集的情况下,这个时候,使用数据压缩可以提高效率 ...

  4. QQ账号测试用例

  5. django基本内容

    1,流程 1.1 了解web程序工作流程 1.2 django生命周期 2,django介绍 ​ 目的:了解Django框架的作用和特点 ​ 作用: 简便.快速的开发数据库驱动的网站 django的优 ...

  6. NOIP2015 解题报告

    Day1 T3 运输计划 二分之后做一遍树上差分,找出被所有时间超限的运输计划覆盖的花费时间最长的航道,将其改造成虫洞. LCA 用倍增求可能会被卡常,建议用 Tarjan 求.

  7. Linux如何安装Docker?

    使用yum安装(centos7) Docker要求Centos系统的内核版本高于3.10,安装Docker前需要验证你的服务器内核版本是否支持Docker. 通过 uname -r 命令来查看你的服务 ...

  8. 我是如何使计算提速>150倍的

    我是如何使计算提速>150倍的 我的原始文档:https://www.yuque.com/lart/blog/lwgt38 书接上文<我是如何使计算时间提速25.6倍>. 上篇文章提 ...

  9. 【GDOI2007】JZOJ2020年8月10日提高组T1 夏娜的菠萝包

    [GDOI2007]JZOJ2020年8月10日提高组T1 夏娜的菠萝包 题目 Description 夏娜很喜欢吃菠萝包,她的经纪人RC每半个月就要为她安排接下来的菠萝包计划.今天是7月份,RC又要 ...

  10. 第7.14节 Python类中的实例方法详析

    第7.14节 Python类中的实例方法详析 一.    实例方法的定义 在本章前面章节已经介绍了类的实例方法,实例方法的定义有三种方式: 1.    类体中定义实例方法 第一种方式很简单,就是在类体 ...