css3 简单css代码 实现文字涂抹动画

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

先看效果:

jcode

分析思路

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

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

具体代码

*{

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%;

}

}

推荐阅读