文字浮现动画

Posted 2020-10-18 Crazy丶Joker

前两天上网看到一个很好看的动画,主要效果是文字慢慢变得清晰一个个的浮现,然后研究了一下

首先是用<i>标签将每一个文字包起来,一个字用一个i标签

    <div>
        <p class="letter-container">
            <i class="char1">H</i>
            <i class="char2">i</i>
            <i class="char3">,</i>
            <i class="char4">这</i>
            <i class="char5">是</i>
            <i class="char6">我</i>
            <i class="char7">的</i>
            <i class="char8">效</i>
            <i class="char9">果</i>
            <i class="char10">库</i>
            <i class="char11">的</i>
            <i class="char12">第</i>
            <i class="char13">一</i>
            <i class="char14">个</i>
            <i class="char15">文</i>
            <i class="char16">件</i>
            <i class="char17">,</i>
            <i class="char18">用</i>
            <i class="char19">来</i>
            <i class="char20">展</i>
            <i class="char21">式</i>
            <i class="char22">文</i>
            <i class="char23">字</i>
            <i class="char24">效</i>
            <i class="char25">果</i>
            <i class="char26">浮</i>
            <i class="char27">现</i>
            <i class="char28"> </i>
            <i class="char29">:</i>
            <i class="char30">)</i>
        </p>
    </div>

i标签会自动有一个文字倾斜的效果,我觉得这里有这个效果还不错,所以这里没有去修改,介意的可以去修改一下.

然后这里讲一下这个动画的实现原理

文字是白色的,所以把网页设置成黑色(这样更容易体现出动画的效果,白底用黑阴影也可以,但是效果没有这么明显)

设置文字样式,这里就不细说了,我们主要说动画

文字是一个一个浮现的,所以先通过选择器把每一个i标签选择出来,添加一个动画延迟

div {
            text-align: center;
            margin-top: 50px;
        }
        
        body{
            background-color: black;
        }
        
        .letter-container i {
            color: #fff;
            filter: alpha(opacity=100);
            -moz-opacity: 1;
            opacity: 1;
            text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            -webkit-transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -o-transition: all 0.3s linear;
            -ms-transition: all 0.3s linear;
            transition: all 0.3s linear;
            -webkit-animation: sharpen 0.9s linear backwards;
            -moz-animation: sharpen 0.9s linear backwards;
            -ms-animation: sharpen 0.9s linear backwards;
            animation: sharpen 0.9s linear backwards;
            font-style: normal;
}

        .letter-container i:nth-child(1) {
            -webkit-animation-delay: 0.05s;
            -moz-animation-delay: 0.05s;
            -ms-animation-delay: 0.05s;
            animation-delay: 0.05s;
        }

        .letter-container i:nth-child(2) {
            -webkit-animation-delay: 0.1s;
            -moz-animation-delay: 0.1s;
            -ms-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        .letter-container i:nth-child(3) {
            -webkit-animation-delay: 0.15s;
            -moz-animation-delay: 0.15s;
            -ms-animation-delay: 0.15s;
            animation-delay: 0.15s;
        }

        .letter-container i:nth-child(4) {
            -webkit-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            -ms-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .letter-container i:nth-child(5) {
            -webkit-animation-delay: 0.25s;
            -moz-animation-delay: 0.25s;
            -ms-animation-delay: 0.25s;
            animation-delay: 0.25s;
        }

        .letter-container i:nth-child(6) {
            -webkit-animation-delay: 0.3s;
            -moz-animation-delay: 0.3s;
            -ms-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }

        .letter-container i:nth-child(7) {
            -webkit-animation-delay: 0.35s;
            -moz-animation-delay: 0.35s;
            -ms-animation-delay: 0.35s;
            animation-delay: 0.35s;
        }

        .letter-container i:nth-child(8) {
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
            -ms-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }

        .letter-container i:nth-child(9) {
            -webkit-animation-delay: 0.45s;
            -moz-animation-delay: 0.45s;
            -ms-animation-delay: 0.45s;
            animation-delay: 0.45s;
        }

        .letter-container i:nth-child(10) {
            -webkit-animation-delay: 0.5s;
            -moz-animation-delay: 0.5s;
            -ms-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }

        .letter-container i:nth-child(11) {
            -webkit-animation-delay: 0.55s;
            -moz-animation-delay: 0.55s;
            -ms-animation-delay: 0.55s;
            animation-delay: 0.55s;
        }

        .letter-container i:nth-child(12) {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            -ms-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }

        .letter-container i:nth-child(13) {
            -webkit-animation-delay: 0.65s;
            -moz-animation-delay: 0.65s;
            -ms-animation-delay: 0.65s;
            animation-delay: 0.65s;
        }

        .letter-container i:nth-child(14) {
            -webkit-animation-delay: 0.7s;
            -moz-animation-delay: 0.7s;
            -ms-animation-delay: 0.7s;
            animation-delay: 0.7s;
        }

        .letter-container i:nth-child(15) {
            -webkit-animation-delay: 0.75s;
            -moz-animation-delay: 0.75s;
            -ms-animation-delay: 0.75s;
            animation-delay: 0.75s;
        }

        .letter-container i:nth-child(16) {
            -webkit-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            -ms-animation-delay: 0.8s;
            animation-delay: 0.8s;
        }

        .letter-container i:nth-child(17) {
            -webkit-animation-delay: 0.85s;
            -moz-animation-delay: 0.85s;
            -ms-animation-delay: 0.85s;
            animation-delay: 0.85s;
        }

        .letter-container i:nth-child(18) {
            -webkit-animation-delay: 0.9s;
            -moz-animation-delay: 0.9s;
            -ms-animation-delay: 0.9s;
            animation-delay: 0.9s;
        }

        .letter-container i:nth-child(19) {
            -webkit-animation-delay: 0.95s;
            -moz-animation-delay: 0.95s;
            -ms-animation-delay: 0.95s;
            animation-delay: 0.95s;
        }

        .letter-container i:nth-child(20) {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -ms-animation-delay: 1s;
            animation-delay: 1s;
        }

                .letter-container i:nth-child(21) {
            -webkit-animation-delay: 1.05s;
            -moz-animation-delay: 1.05s;
            -ms-animation-delay: 1.05s;
            animation-delay: 1.05s;
        }

        .letter-container i:nth-child(22) {
            -webkit-animation-delay: 1.1s;
            -moz-animation-delay: 1.1s;
            -ms-animation-delay: 1.1s;
            animation-delay: 1.1s;
        }

        .letter-container i:nth-child(23) {
            -webkit-animation-delay: 1.15s;
            -moz-animation-delay: 1.15s;
            -ms-animation-delay: 1.15s;
            animation-delay: 1.15s;
        }

        .letter-container i:nth-child(24) {
            -webkit-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            -ms-animation-delay: 1.2s;
            animation-delay: 1.2s;
        }

        .letter-container i:nth-child(25) {
            -webkit-animation-delay: 1.25s;
            -moz-animation-delay: 1.25s;
            -ms-animation-delay: 1.25s;
            animation-delay: 1.25s;
        }

        .letter-container i:nth-child(26) {
            -webkit-animation-delay: 1.3s;
            -moz-animation-delay: 1.3s;
            -ms-animation-delay: 1.3s;
            animation-delay: 1.3s;
        }

        .letter-container i:nth-child(27) {
            -webkit-animation-delay: 1.35s;
            -moz-animation-delay: 1.35s;
            -ms-animation-delay: 1.35s;
            animation-delay: 1.35s;
        }

        .letter-container i:nth-child(28) {
            -webkit-animation-delay: 1.4s;
            -moz-animation-delay: 1.4s;
            -ms-animation-delay: 1.4s;
            animation-delay: 1.4s;
        }

        .letter-container i:nth-child(29) {
            -webkit-animation-delay: 1.45s;
            -moz-animation-delay: 1.45s;
            -ms-animation-delay: 1.45s;
            animation-delay: 1.45s;
        }

        .letter-container i:nth-child(30) {
            -webkit-animation-delay: 1.5s;
            -moz-animation-delay: 1.5s;
            -ms-animation-delay: 1.5s;
            animation-delay: 1.5s;
        }

最后就是我们的动画了,分为三个阶段,主要基本就是一个文字阴影从大到小的过程

@keyframes sharpen {
            0% {
                   filter: alpha(opacity=0);
                -moz-opacity: 0;
                opacity: 0;
                text-shadow: 0px 0px 100px #fff;
                color: transparent;
            }

            90% {
                opacity: 0.9;
                text-shadow: 0px 0px 10px #fff;
                color: transparent;
            }

            100% {
                color: #fff;
                filter: alpha(opacity=100);
                -moz-opacity: 1;
                opacity: 1;
                text-shadow: 0px 0px 2px #fff,1px 1px 4px rgba(0,0,0,0.7);
            }
        }

效果很棒,应用于白色背景的改一下阴影颜色和文字颜色就可以了,这里放在黑色上是效果更明显

很佩服原网页作者的想法,最后说一下动画是从这里看到的  http://www.c945.com/default.html