新增第131个小实例：纯CSS实现打字动画特效

2022-03-30 17:07:11 +08:00 · 2022-03-30 17:07:11 +08:00 · 1f2fd685a6
parent 5fda20e758
commit 1f2fd685a6
3 changed files with 87 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -137,4 +137,5 @@
 127. HTML5+CSS3小实例：带标题的图像悬停效果
 128. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效
 129. HTML5+CSS3小实例：纯CSS实现简约的天气图标动画特效（下）
-130. HTML5+CSS3小实例：传送带式的loading加载动画
+130. HTML5+CSS3小实例：传送带式的loading加载动画
+131. HTML5+CSS3小实例：纯CSS实现打字动画特效
--- a/code/131/131.css
+++ b/code/131/131.css
@ -0,0 +1,67 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #222;
+}
+.text{
+    /* 相对定位 */
+    position: relative;
+    color: #fff;
+    font-size: 62px;
+    /* 字间距 */
+    letter-spacing: 3px;
+    /* 单个字宽度 */
+    width: 65px;
+    /* 不换行 */
+    white-space: nowrap;
+    /* 溢出隐藏 */
+    overflow: hidden;
+    /* 自定义属性(变量),通过var函数进行调用,这里用来记录字数(6个字,根据你的实际字数而定) */
+    --count: 6;
+    /* 执行动画: 动画名 时长 分步过渡(这里分6步) 停留在最后一帧 */
+    /* 时长要根据字数而定,字数多的话要适当延长 */
+    animation: typing 1.8s steps(var(--count)) forwards;
+    /* 加个倒影可能会比较好看 */
+    -webkit-box-reflect: below 1px linear-gradient(transparent 30%,rgba(0,0,0,0.05));
+}
+/* 光标 */
+.text::after{
+    content: "";
+    width: 2px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #fff;
+    /* 执行光标动画: 动画名 时长 线性的 无限次播放 */
+    animation: blink 1s linear infinite;
+}
+
+/* 定义动画 */
+/* 光标闪烁 */
+@keyframes blink {
+    0%,49%{
+        opacity: 0;
+    }
+    50%,100%{
+        opacity: 1;
+    }
+}
+/* 打字动画 */
+@keyframes typing {
+    0%{
+        width: 0;
+    }
+    100%{
+        /* 计算字全部显示完的宽度,65px表示单个字宽度 */
+        width: calc(var(--count) * 65px);
+    }
+}
--- a/code/131/131.html
+++ b/code/131/131.html
@ -0,0 +1,18 @@
+<!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>纯CSS实现打字动画特效</title>
+    <link rel="stylesheet" href="131.css">
+</head>
+
+<body>
+    <div class="text">
+        打字动画特效
+    </div>
+</body>
+
+</html>