波浪文字动画

weizwz · Jan 12, 2025 · e11e6db · e11e6db
1 parent f773f09
commit e11e6db
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -52,6 +52,7 @@ <h2>funAnimation <span> —— 有趣的样式和动画</span></h2>
     { name: '过年灯笼', path: 'page/lantern.html' },
     { name: '翻页文字', path: 'page/textPage.html' },
     { name: '3D文字', path: 'page/3dtext.html' },
+    { name: '波浪文字', path: 'page/textWavy.html' },
     { name: '自动弹幕', path: 'page/barrage.html' },
     { name: '流体按钮', path: 'page/fluidBtn.html' },
     { name: '流光按钮', path: 'page/danceTime.html' },

diff --git a/page/textWavy.html b/page/textWavy.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>波浪文字</title>
+  <style>
+    .title {
+      margin-top: 30px;
+      white-space: nowrap;
+      font-size: 5rem;
+      text-align: center;
+      --c: #1890ff;
+      --w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
+      --w2: radial-gradient(100% 57% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
+      background: var(--w1), var(--w2), var(--w1), var(--w2);
+      background-position-x: -200%, -100%, 0%, 100%;
+      background-position-y: 100%;
+      background-size: 50% 100%;
+      animation: m 3s infinite linear;
+      font-weight: 800;
+      color: transparent;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-stroke: 2px var(--c);
+    }
+    @keyframes m {
+      0% {
+        background-position-x: -200%, -100%, 0%, 100%;
+      }
+      100% {
+        background-position-x: 0%, 100%, 200%, 300%;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="title">精诚所至，金石为开</div>
+
+</html>