爱站程序员基地每日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 代码片段
- 首先对 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%, 背景设为黑色.
- 初始化字体颜色及大小
h1{margin: 0;padding: 0;color: #111;font-size: 10em;}
设置字体颜色为 #111, 效果如下
- 设置动画和字体摆放方式
h1 span{display: table-cell;margin: 0;padding: 0;animation: animate 2s linear infinite;}
设置了摆放方式是 table-cell , 字体更加紧密并且间距相同, 设置动画, 线性无限放.
- 动画设置
@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 实现了模糊效果, 效果如下
- 轮流开始播放动画
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;}}
