淡入的文字

2021-07-29 07:50:26 字數 1916 閱讀 7508

css3學習筆記(1)—淡入的文字

今天有空把前幾天學的東西發一下,都是一些簡單的東西,但是千里之行始於足下,我雖然走的慢,但是未停下前進的腳步~~~~~~~

下來看下我做的「淡入的文字」最終動態效果:

上面這個動畫效果製作的過程是:

(1)先自定義乙個透明度從0到1變化的動畫,然後在animation中呼叫這個動畫效果

(2)注意不同行文字出現的時間先後,這個通過animation中延時屬性可以實現

(3)規定文字最終動態為動畫的最終顯示狀態,否則文字顯示完會自動消失,這個用animation-fill-mode可以實現

一、先來看看html中程式:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>淡入的文字

title

>

<

link

type

="text/css"

rel="stylesheet"

href

="css/animate.css"

/>

head

>

<

body

>

<

div

class

="fade-in-words"

>

<

div

class

="first-words"

>山一程,水一程,

div>

<

div

class

="second-words"

>身向榆關那畔行,

div>

<

div

class

="third-words"

>夜深千帳燈。

div>

<

div

class

="four-words"

>風一更,雪一更,

div>

<

div

class

="five-words"

>聒碎鄉心夢不成,

div>

<

div

class

="six-words"

>故園無此聲。

div>

div>

body

>

html

>

上面這段程式主要是先把文字呈現出來,我隨便找了一首詩啦~~~~~大家不要去猜它的意思qaq

二、看看css樣式(主要是css3)

.fade-in-words

/*自定義乙個透明度從0到1的動畫,它的名稱是fade-in*/

@keyframes fade-in

100%

}@-webkit-keyframes fade-in

100%

}@-ms-keyframes fade-in

100%

}@-o-keyframes fade-in

100%

}@-moz-keyframes fade-in

100%

}.first-words

.second-words

.third-words

.four-words

.five-words

.six-words

上面的程式我在注釋裡面都寫得很清楚,感興趣的可以看我寫的注釋,我覺得比較簡單,沒有難度,但是需要注意瀏覽器字首的新增,否則你懂得~~~~

滾動公告並實現文字淡入淡出

pragma once include cocos2d.h include 2d ccclippingnode.h using ns cc class pannelnews public node include pannelnews.h include defineconfig.h include...

淡入淡出效果

程式啟動畫面 import import splashviewcontroller.h class splashdemoviewcontroller uiwindow window splashviewcontroller viewcontroller property nonatomic,reta...

jQuery 淡入淡出

通過 jquery,您可以實現元素的淡入淡出效果。jquery 擁有下面四種 fade 方法 fadein fadeout fadetoggle fadeto 下面一一介紹 jquery fadein 用於淡入已隱藏的元素。語法 selector fadein speed,callback 可選的 ...