首页 > 其他分享> > TypingEffect打字效果

TypingEffect打字效果

2021-10-27 19:03:30 作者：互联网

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>typing-demo</title>
    <link rel="stylesheet" type="text/css" href="./css.css">
</head>

<!--设置margin为0清除body边界，不至于出现滚动条-->
<body style="margin: 0;">
    <div class="wrapper">
        <div class="typing-demo">
            This is a Typing Demo.
        </div>
    </div>
</body>

</html>

css.css

.wrapper {
    height: 100vh;/*1vh就是当前浏览器窗口可见高度的1%，100vh就是该元素高度是浏览器高度的100%*/
    display: flex;/*flex布局，Flex是Flexible Box的缩写，意为"弹性布局"*/
    align-items: center;/*弹性盒子元素在该行的侧轴（纵轴）上居中放置*/
    justify-content: center;/*元素在主轴（页面）上居中排列*/
}
.typing-demo{
    width: 22ch;/*1ch就是数字0的宽度*/
    /*steps(22)把动画分成22份，
    step-end 等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始
    animation-iteration-count:infinite,动画不停执行
    animation-direction 值是 "alternate"，则动画会在奇数次数正常播放，而在偶数次数向后播放。
    */
    animation: typing 2s steps(22),blink .5s step-end infinite alternate;
    white-space: nowrap;/*段落中的文本不进行换行*/
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;/*1em=元素中文本的1个垂直高度*/
}
@keyframes typing{
    from{
        width: 0;
    }
}
@keyframes blink {
    50%{
        border-color: transparent;
    }
}

标签：动画,end,效果,22,打字,TypingEffect,animation,steps,typing
来源： https://www.cnblogs.com/Carl-lc/p/15472439.html