css实现涂绘文字的效果

学习来自B站 HTML5 CSS3小实例：文字涂抹动画_哔哩哔哩_bilibili

先看效果:

分析思路

1. 定义好一个div盒子 里面放文本内容
2. 再在div盒子设置伪元素,父级设置position: relative;,伪元素(子级)设置position: absolute; left: 0; top: 0;实现和div盒子重叠,
3. 通过设置伪元素的宽度,和溢出隐藏overflow:hidden以及文本不换行 white-space: nowrap;,让他与父级文本保持一致
4. 最后就是实现动画的关键了 也很简单,就是在起始伪元素的宽度为0% ;结束的时候为父级的100% 设置动画时长 速度运动曲线 执行次数

光标是通过给伪元素添加右边框实现的,有点拉,但有些样子(狗头保命)

具体代码

代码语言：javascript复制

    <div>
        How Are You nearly
    </div>

代码语言：javascript复制

       *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            width: 100%;
            height: 100vh;
            background-color: #233333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            position: relative;
            font-size: 42px;
            font-weight: bolder;
        }
        div::after{
            content: 'How Are You nearly';
            position: absolute;
            left: 0;
            top: 0;
            color: orange;
            width: 31px;
            /* 设置文本不换行 */
            white-space: nowrap;
            /* 超出31px 盒子宽度隐藏 */
            overflow: hidden;
            /* 动画名称 动画一次时长 动画速度曲线  无限次播放 */
            animation: Move 2.2s linear infinite;
            /* 利用边框 模光标 */
            border-right: 4px solid orange;
        }
        /* 添加动画 */
        @keyframes Move {
            0%{
                width: 0px;
            }
            100%{
                width: 100%;
            }
            
        }

border position width 动画 css

0 人点赞