不用真话，代码替你表真心

2024-02-03 16:13:10

HTML/CSS 版吃瓜指南

CSS和HTML一直以来就是前端工程师的必备技能，然而，这两个能力如今也被用来传达人的真实感情，不信？我来举个例子，假若你想向某人示爱，但是传统的语言让你难以启齿，那不妨试试使用CSS和HTML，说不定能将你的爱意传达地淋漓尽致。

学会了本期要介绍的特效，你不仅能够制作一些华丽的效果，甚至还能展现你们之间丰富的秘密语言。话不多说，接下来我们就来看看如何实现在屏幕上轮流输出一个句子。

$dialog: "我们/想和/你在一起。";
$letters: "";
$duration: 1s;
$delay: 0.2s;

@for $i from 1 through str-length($dialog) {
    $letters: $letters + substr($dialog, $i, 1);
    .letter_#{$i} {
        -webkit-animation-duration: $duration;
        animation-duration: $duration;
        -webkit-animation-delay: $i * $delay;
        animation-delay: $i * $delay;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }
}

@keyframes show {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#container {
    display: inline-block;
}

#container .letter {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-animation-name: show;
    animation-name: show;
}