文字浮現動畫

前兩天上網看到一個很好看的動畫,主要效果是文字慢慢變得清晰一個個的浮現,而後研究了一下

首先是用<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