每日CSS_发光文本效果

每日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;
  }
}
posted @ 2020-12-22 21:28  随遇丿而安  阅读(268)  评论(0)  编辑  收藏  举报