每日CSS_發光文本效果
每日CSS_發光文本效果
2020_12_23
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;
}
}
