29

Drewe-delu · Feb 1, 2021 · 549a49e · 549a49e
1 parent 679fc81
commit 549a49e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 0 deletions.
diff --git a/如何通过 HTML+CSS 完成发光 Loading特效/index.html b/如何通过 HTML+CSS 完成发光 Loading特效/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="./style.css" rel="stylesheet">
+  <title>29.发光加载特效</title>
+</head>
+<body>
+  <h2>
+    <span>L</span>
+    <span>o</span>
+    <span>a</span>
+    <span>d</span>
+    <span>i</span>
+    <span>n</span>
+    <span>g</span>
+    <span>...</span>
+  </h2>
+</body>
+</html>
diff --git a/如何通过 HTML+CSS 完成发光 Loading特效/style.css b/如何通过 HTML+CSS 完成发光 Loading特效/style.css
@@ -0,0 +1,67 @@
+*{
+  margin: 0;
+  padding: 0;
+  font-family: '微软雅黑', sans-serif;
+}
+body{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #000;
+}
+
+h2{
+  color: #000;
+  font-size: 6em;
+  display: flex;
+}
+
+h2 span{
+  animation: animate 4s linear infinite;
+}
+
+h2 span:nth-child(1){
+  animation-delay: 0s;
+}
+h2 span:nth-child(2){
+  animation-delay: 0.1s;
+}
+h2 span:nth-child(3){
+  animation-delay: 0.2s;
+}
+h2 span:nth-child(4){
+  animation-delay: 0.3s;
+}
+h2 span:nth-child(5){
+  animation-delay: 0.4s;
+}
+h2 span:nth-child(6){
+  animation-delay: 0.5s;
+}
+h2 span:nth-child(7){
+  animation-delay: 0.6s;
+}
+h2 span:nth-child(8){
+  animation-delay: 0.7s;
+}
+
+@keyframes animate{
+  0%, 100%{
+    color: #fff;
+    filter: blur(2px);
+    text-shadow:  0 0 10px #00b3ff,
+                  0 0 20px #00b3ff,
+                  0 0 40px #00b3ff,
+                  0 0 80px #00b3ff,
+                  0 0 120px #00b3ff,
+                  0 0 200px #00b3ff,
+                  0 0 300px #00b3ff,
+                  0 0 300px #00b3ff;
+  }
+  25%, 75%{
+    color: #000;
+    filter: blur(0px);
+    text-shadow: none;
+  }
+}