每日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;
}
}