更新第46个小实例

2021-11-18 22:13:22 +08:00 · 2021-11-18 22:13:22 +08:00 · b69e2db4e1
parent e82e0405b8
commit b69e2db4e1
3 changed files with 75 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -49,4 +49,5 @@
 42. HTML5+CSS3小实例之背景不停渐变效果
 43. HTML5+CSS3小实例之3D轮播卡片
 44. HTML5+CSS3小实例之炫彩流光圆环加载动画
-45. HTML5+CSS3小实例之响应式卡片悬停效果
+45. HTML5+CSS3小实例之响应式卡片悬停效果
+46. HTML5+CSS3小实例之波浪文字效果
--- a/css/46.css
+++ b/css/46.css
@ -0,0 +1,45 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #000;
+}
+.wavy{
+    /* 相对定位 */
+    position: relative;
+    /* 倒影效果 */
+    -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));
+}
+.wavy span{
+    position: relative;
+    display: inline-block;
+    color: #fff;
+    font-size: 50px;
+    text-transform: uppercase;
+    letter-spacing: 8px;
+    /* 执行动画：动画名 时长 加速后减速 无限次播放 */
+    animation: wavyAnimate 1s ease-in-out infinite;
+    /* 通过var函数调用自定义属性--i，在计算出动画延迟时间 */
+    animation-delay: calc(0.1s * var(--i));
+}
+
+/* 定义动画 */
+@keyframes wavyAnimate {
+    0%{
+        transform: translateY(0);
+    }
+    20%{
+        transform: translateY(-20px);
+    }
+    40%,100%{
+        transform: translateY(0);
+    }
+}
--- a/html/46.html
+++ b/html/46.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>波浪文字效果</title>
+    <link rel="stylesheet" href="../css/46.css">
+</head>
+
+<body>
+    <div class="wavy">
+        <!-- --i是自定义属性，可通过var函数调用 -->
+        <span style="--i:1;">l</span>
+        <span style="--i:2;">o</span>
+        <span style="--i:3;">a</span>
+        <span style="--i:4;">d</span>
+        <span style="--i:5;">i</span>
+        <span style="--i:6;">n</span>
+        <span style="--i:7;">g</span>
+        <span style="--i:8;">.</span>
+        <span style="--i:9;">.</span>
+        <span style="--i:10;">.</span>
+    </div>
+</body>
+
+</html>