CSS练习之自动打字机

礼拜三 3

已于 2024-01-11 22:57:21 修改

阅读量980

点赞数 25

分类专栏： Web前端学习文章标签： css 前端

于 2024-01-11 20:30:46 首次发布

本文链接：https://blog.csdn.net/m0_62622679/article/details/135537934

版权

Web前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web前端学习

CSS练习之自动打字机
 Vue.js简介

文章目录

Web前端学习
前言
新建一个HTML模板
添加输入的文本行
添加光标
使用CSS3激活动画
完整代码
效果演示

前言

CSS 学习之自动打字机

知识点

margin 属性是外边距，即元素距上级元素或相邻兄弟元素的距离。该属性可有1到4个值。（详情见MDN margin 属性）
background-color 属性设置元素的背景颜色
font-size 属性可设置元素中文字的大小
overflow 属性规定当内容溢出元素框时的显示效果。（详情见：MDN overflow 属性）
animation 属性用于设置元素的动画效果，它是一个简写属性，包含六个值，分别是：（详情见：MDN animation 属性）
animation-name（动画名字）；
animation-duration（动画周期）；
animation-timing-function（每个动画周期的执行节奏）；
animation-delay（动画延时时间）；
animation-iteration-count（动画迭代次数）；
animation-direction（动画是否反向播放）；
animation-fill-mode（动画执行前后应用目标的方式）；
animation-play-state（动画是否运行或暂停）。

新建一个HTML模板

新建一个标准html模板并且更改title中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 CSS 制作打字机</title>
    <style>
        
    </style>
</head>
<body>

</body>
</html>

在<style>...</style>中添加CSS代码。

html {
  margin: 0;
}

body {
  background-color: black;
  margin: 0;
  margin-left: 5%;
}

添加输入的文本行

在body中添加需要打印显示的文字。

<div id="typing">I am a <span>web learner</span></div>

使用overflow：hidden和white-space：nowrap来隐藏溢出的字符。

#typing {
  color: white;
  float: left;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  margin-top: 20%;
  margin-left: 20%;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 5s steps(22) 1s infinite alternate;
}

添加光标

在body中添加光标。

<div id="crow">|</div>

CSS代码如下：

#crow {
  float: left;
  margin-top: 20%;
  color: rgb(79, 255, 35);
  font-family: consolas;
  font-weight: bold;
  font-size: 50px;
  animation: crow 0.5s linear 0s infinite;
}

使用CSS3激活动画

使用 @keyframes 为输入的文本添加动画。

创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。以百分比来规定改变发生的时间，或者通过关键词 from 和 to，其等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。详情见：MDN @keyframes 规则

在文件中添加以下代码：

@keyframes typing {
  from {
    width: 0ch;
  }
  to {
    width: 15ch;
  }
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 CSS 制作打字机</title>
    <style>
        html {
            margin: 0;
        }

        body {
            background-color: black;
            margin: 0 0 0 5%;
        }
       #typing {
            color: white;
            float: left;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 50px;
            margin-top: 20%;
            margin-left: 20%;
            overflow: hidden;
            white-space: nowrap;
            animation: typing 5s steps(22) 1s infinite alternate;
        }
        #typing span {
            color: rgb(79, 255, 35);
        }
        #crow {
            float: left;
            margin-top: 20%;
            color: rgb(79, 255, 35);
            font-family: consolas;
            font-weight: bold;
            font-size: 50px;
            animation: crow 0.5s linear 0s infinite;
        }
        @keyframes typing {
            from {
                width: 0ch;
            }
            to {
                width: 15ch;
            }
        }
    </style>
</head>
<body>
<div id="typing">I am a <span>web learner</span></div>
<div id="crow">|</div>
</body>
</html>