MENU
文本擦除效果与下划线结合
html
html
<p class="box">
<span>
突来的消息 那个人是你 这么多年 你杳无音讯 没钱难买通天路 你往前走不要回头 我的春风何时来 带我走向大海 能够握紧的就别放了 能够拥抱的就别拉扯 我知道 吹过的牛逼 也会随青春一笑了之 就老去吧 孤独别醒来
你渴望的离开 只是无处停摆 多想一觉醒来 有件开心的事发生 清醒的人最荒唐 你纵身跃入酒杯 梦从此溺亡 功名利禄忽下忽上 虚无的像云在飘荡
</span>
</p>
JavaScript
javascript
function init() {
let textEl = document.querySelector(".box span"),
str = textEl.textContent,
i = 0;
textEl.textContent = '';
function initRAF() {
if (i >= str.length) return false;
textEl.textContent += str[i];
requestAnimationFrame(initRAF);
i++;
}
initRAF();
}
init();
style
css
.box {
color: #333333;
line-height: 2;
}
.box span {
background: linear-gradient(to right, #333333, #800000) no-repeat right bottom;
background-size: 0 2px;
transition: background-size 1s;
cursor: pointer;
}
.box span:hover {
background-position: left bottom;
background-size: 100% 2px;
}
css下划线动画
html
html
<p class="box">
<span>
上班很累 总不能不上吧 挣钱很苦 总不能不赚吧 年纪大了 少一点任性 你可以不做你不喜欢的事 但你要做应该做的事 巷子里的猫很自由 但却没有归宿 围墙里的狗有归宿 却终身都得低头 人生这道选择题 怎么选都会有遗憾
人间非净土
各有各的苦 每个人都不容易 无论你当下正在经历什么 都要调整心态 继续前行 记住你的心态是最好的风水
</span>
</p>
style
css
.box {
color: #333333;
line-height: 2;
}
.box span {
background: linear-gradient(to right, #333333, #800000) no-repeat right bottom;
background-size: 0 2px;
transition: background-size 1s;
cursor: pointer;
}
.box span:hover {
background-position: left bottom;
background-size: 100% 2px;
}