css实现涂绘文字的效果

心安事随

发布于 2024-07-29 16:31:19

630

发布于 2024-07-29 16:31:19

文章被收录于专栏：前端大合集

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

先看效果:

分析思路

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

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

具体代码

    <div>
        How Are You nearly
    </div>

       *{
            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%;
            }
            
        }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

border