7款超華麗的HTML5 Canvas文字動畫特效

FelicitasZq 7年前發布 | 38K 次閱讀 前端技術 canvas

文字是網頁中最為常見的元素之一,當然我們使用最多的就是調整文字的顏色、大小等基本屬性。有時候我們在一些活動頁面上需要展示特別樣式的文字效果,這時候我們就可以利用 HTML5 或者CSS3結合的方式來渲染文字的動畫特效。本文就總結了7款超華麗的HTML5 Canvas文字動畫特效,可以讓你的頁面更加的活靈活現,充滿夢幻的色彩。

1、HTML5 Canvas幻彩火焰文字特效

之前我們分享過很多基于HTML5 Canvas的火焰渲染動畫特效,比如這款 HTML5 Canvas炫酷的火焰風暴動畫 和這個 HTML5動感的火焰燃燒動畫特效 。這次來分享一款很特別的HTML5文字特效,文字同時是利用火焰來渲染的,并且燃燒的文字火焰還可以隨時改變顏色,讓文字更顯幻彩。

在線演示 /    源碼下載

2、超華麗CSS3 3D五彩發光文字動畫

不久前我們已經為大家介紹過一些炫酷的CSS3文字動畫和HTML5文字特效,有些都非常不錯,比如最近剛分享的CSS3文字跳動旋轉動畫以及 HTML5 Canvas幻彩火焰文字特效 。這次我們要來看一款純CSS3實現的3D五彩發光文字動畫,文字呈現3D立體的視覺效果,同時定時會變換字體顏色,并且文字周圍微微帶有發光的效果,這樣就更加體現出3D的動畫效果了。

在線演示 /    源碼下載

3、HTML5像素文字爆炸重組動畫特效

HTML5可以把文字效果做得非常酷,就像之前分享的HTML5/CSS3發光文字和 HTML5/CSS3文字投影特效 就非常絢麗。今天我們要分享一款基于HTML5技術的文字像素爆炸重組動畫特效,我們可以在輸入框中指定任意文字,點擊確定按鈕后,就會將原先的文字爆炸散去,新的文字以像素點的形式組合起來,看起來非常棒。

在線演示 /    源碼下載

4、HTML5粒子效果的文字動畫特效

記得之前向大家分享過一款 HTML5 Canvas實現會跳舞的時間動畫 ,利用了HTML5的粒子動畫特性。今天要分享的也是一款基于HTML5的粒子效果的文字動畫特效,并且它可以實現每個文字的逐幀播放,形成一句很浪漫的詩句。

在線演示 /    源碼下載

5、HTML5 Canvas文字粒子動畫 可自定義文字內容

之前我們分享過一些關于HTML5的粒子動畫,有文字粒子動畫,比如這款 HTML5 Canvas粒子效果文字動畫特效 就非常不錯。今天要分享的也是一款基于HTML5 Canvas的文字粒子動畫特效,我們可以自定義文字的內容、粒子的半徑、粒子重力方向、粒子抖動頻率等,看起來非常強大和炫酷。

在線演示 /    源碼下載

6、HTML5 Canvas粒子效果文字動畫特效

之前我們分享過很多超酷的文字特效,其中也有利用HTML5和CSS3的。今天我們要來分享一款基于HTML5 Canvas的文字特效,輸入框中輸入想要展示的文字,回車后即可在canvas上繪制出粒子效果的文字動畫,相當酷的動畫效果。

在線演示 /    源碼下載

7、HTML5 Canvas 3D球形文字標簽云動畫

個人博客程序中經常會使用的一個功能叫標簽云,就是把許多標簽文字提取出來,使用云的形式將這些標簽展示給讀者。今天要分享的就是一款基于HTML5 Canvas的3D球形標簽云動畫,你可以定義任意的文字,然后調用HTML5代碼初始化一個3D的球形標簽云,效果非常不錯。

在線演示 /    源碼下載

 

來自:http://www.html5tricks.com/7-wonderful-html5-canvas-text.html

 

 本文由用戶 FelicitasZq 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!