web前端之小功能聚集、简单交互效果


文本擦除效果与下划线结合

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;
}
相关推荐
世伟爱吗喽2 分钟前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo15 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~34 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
小浣熊喜欢揍臭臭1 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@1 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响1 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_584121432 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊2 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发