前兩天上網看到乙個很好看的動畫,主要效果是文字慢慢變得清晰乙個個的浮現,然後研究了一下
首先是用標籤將每乙個文字包起來,乙個字用乙個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 body.letter-container i .letter-container i:nth-child(1) .letter-container i:nth-child(2) .letter-container i:nth-child(3) .letter-container i:nth-child(4) .letter-container i:nth-child(5) .letter-container i:nth-child(6) .letter-container i:nth-child(7) .letter-container i:nth-child(8) .letter-container i:nth-child(9) .letter-container i:nth-child(10) .letter-container i:nth-child(11) .letter-container i:nth-child(12) .letter-container i:nth-child(13) .letter-container i:nth-child(14) .letter-container i:nth-child(15) .letter-container i:nth-child(16) .letter-container i:nth-child(17) .letter-container i:nth-child(18) .letter-container i:nth-child(19) .letter-container i:nth-child(20) .letter-container i:nth-child(21) .letter-container i:nth-child(22) .letter-container i:nth-child(23) .letter-container i:nth-child(24) .letter-container i:nth-child(25) .letter-container i:nth-child(26) .letter-container i:nth-child(27) .letter-container i:nth-child(28) .letter-container i:nth-child(29) .letter-container i:nth-child(30)
最後就是我們的動畫了,分為三個階段,主要基本就是乙個文字陰影從大到小的過程
@keyframes sharpen 90% 100% }
效果很棒,應用於白色背景的改一下陰影顏色和文字顏色就可以了,這裡放在黑色上是效果更明顯
很佩服原網頁作者的想法,最後說一下動畫是從這裡看到的
jQuery文字動畫效果
這裡跟大家分享一款jquery的外掛程式，即使用jquery將文字有一定的動畫效果。jquery.texteffects.js 使用方法也很簡單 引入上述的js檔案，然後給你的文字加上乙個class，寫如下jquery 這裡是外掛程式的些引數的設定方法 texteffect speed specif...
文字動畫效果小結
重所周知，在處理頁面的時候，動畫會給靜態頁面帶了一些生機，我們也會在製作頁面的時候考慮增加一些動畫效果，來增強頁面的使用者體驗。但是需要注意的是，不是所有的動畫都能增強使用者體驗，也需要慎重使用動畫。時刻牢記一條準則 要麼實用，要麼優雅，要麼死路一條！我在之前也對velocity.js這個動畫庫做過...
文本色值變化 動畫
一 隨機色變化 1.首先初始化乙個label 2.然後設定漸變層 3.設定漸變層的裁剪層 4.加入定時器，隨機變換色值 二 文字背景色值更改 1.依然是先初始化 2.建立動畫 kcafillmoderemoved 動畫結束後，將會移除掉做的動畫效果 kcafillmodeforwards 動畫結束後...