web前端之小功能聚集、简单交互效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了web前端之小功能聚集、简单交互效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

纯CSS实现可编辑文字霓虹灯闪烁效果

效果图

html

<h1 contenteditable="true">Hello World</h1>

style

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #07252d;
}

h1 {
    position: relative;
    letter-spacing: 15px;
    text-transform: uppercase;
    text-align: center;
    color: #0e3742;
    line-height: 0.7;
    outline: none;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
    animation: animate 5s linear infinite;
}

@keyframes animate {

    0%,
    20%,
    30%,
    50%,
    60%,
    80%,
    90%,
    100% {
        color: #0e3742;
    }

    20%,
    30%,
    50%,
    60%,
    80%,
    90%,
    100% {
        color: #ffffff;
        text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4, 0 0 80px #03bcf4;
    }
}

css之实现流水文字、闪烁、荧光、炫酷

效果图

html

<div class="twinkle_text">
    <p>web前端开发工程师</p>
</div>

style

body {
    background-color: #333;
}

.twinkle_text {
    background-image: -webkit-linear-gradient(left, #ff0000, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, #ffff00 100%);
    -webkit-text-fill-color: transparent;
    /* 将字体设置成透明色 */
    -webkit-background-clip: text;
    /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
    font-size: 37px;
}

@keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

web前端之文本擦除效果与下划线结合

效果图

html

<p class="box">
    <span>
        突来的消息 那个人是你 这么多年 你杳无音讯 没钱难买通天路 你往前走不要回头 我的春风何时来 带我走向大海 能够握紧的就别放了 能够拥抱的就别拉扯 我知道 吹过的牛逼 也会随青春一笑了之 就老去吧 孤独别醒来
        你渴望的离开 只是无处停摆 多想一觉醒来 有件开心的事发生 清醒的人最荒唐 你纵身跃入酒杯 梦从此溺亡 功名利禄忽下忽上 虚无的像云在飘荡
    </span>
</p>

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

.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

<p class="box">
    <span>
        上班很累 总不能不上吧 挣钱很苦 总不能不赚吧 年纪大了 少一点任性 你可以不做你不喜欢的事 但你要做应该做的事 巷子里的猫很自由 但却没有归宿 围墙里的狗有归宿 却终身都得低头 人生这道选择题 怎么选都会有遗憾
        人间非净土
        各有各的苦 每个人都不容易 无论你当下正在经历什么 都要调整心态 继续前行 记住你的心态是最好的风水
    </span>
</p>

style文章来源地址https://www.toymoban.com/news/detail-842813.html

.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;
}