前端入坑第六天

最新推荐文章于 2024-07-26 11:48:42 发布

Brittany____

最新推荐文章于 2024-07-26 11:48:42 发布

阅读量103

点赞数

分类专栏：前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/Brittany____/article/details/127562883

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

案例1----打字特效

Filmage 2022-10-27_231430

在这里插入图片描述

HTML代码块

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>打字特效</title>
</head>
<body>
    <div class="text">
        <span>ARE YOU KIDDING ME?</span>

    </div>
</body>
</html>

CSS代码块

*{
    padding: 0;
    margin: 0;

    /* box-sizing: border-box; */
    box-sizing: content-box; 
}

body{
    height: 100vh;
    background: #000;
}

.text{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1eff00;
}
/* ch是一个新的单位，表示的是数字”0“的宽度 */
.text span{
    font-size: 54px;
    font-weight: 700;
    width: 19ch;
    white-space: nowrap;
    overflow: hidden;
/* Monaco,monospace,Consolas */
    font-family: 'Consolas';
    /* steps函数，指定了一个阶跃函数 
    steps() 第一个参数number为指定间隔数，即把动画分为n步阶段性 */
    animation: typing 6s steps(19),
                caret 1s steps(1) infinite;
    border-right: 2px solid;
    /* 用户无法选择：用来消除真实的鼠标光标 */
    user-select: none;
}
@keyframes typing{
        from{
            width: 0px;
        }
    }
@keyframes caret {
    50%{
        border-color: transparent;
    }
}