16個(gè)超牛逼的HTML5和JavaScript特效

用說， Flash的效果大家都清楚。實(shí)際上，HTML5和JavaScript擁有很多新屬性，可以用它們來替代Flash。W3Cschool精選16個(gè)超牛逼的HTML5和JavaScript特效，看了這些特效，未來的Web發(fā)展前途無量。

1.特效：FlowerPower

創(chuàng)作者使用花朵作為畫刷，以貝茲曲線方式繪圖。

2.特效：Breathing Galaxies

動(dòng)態(tài)變換直徑及顏色，可通過鼠標(biāo)或鍵盤產(chǎn)生新形狀，這個(gè)效果不錯(cuò)!

3.特效：Noise Field

移動(dòng)鼠標(biāo)可改變粒子運(yùn)動(dòng)，點(diǎn)擊可隨機(jī)生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字動(dòng)畫特效

W3Cschool利用HTML5，制造出了粒子效果文字動(dòng)畫特效。只要你輸入框中輸入想要展示的文字，回車后即可在canvas上繪制出粒子效果的文字動(dòng)畫，相當(dāng)酷的動(dòng)畫效果。

5.特效：Swirling Tentacles

三維脈沖效果，沿著脈沖線有運(yùn)動(dòng)的顏色漸變模塊。

6.特效：Keylight

雙擊生成兩個(gè)以后的鍵即可發(fā)出聲音，移動(dòng)鍵的位置可產(chǎn)生不同的聲音效果。W3Cschool上面有很多這樣的教程，有興趣可以去看一下！

7.特效：Rotating Spiral

旋轉(zhuǎn)的螺旋效果，單擊可以控制開始和停止旋轉(zhuǎn)，是不是覺得高大上？

8.Blob

拖動(dòng)水滴有重力效果，雙擊可以分離，小水滴碰到大水滴會(huì)合并。

9.Trail

彩色顆粒跟隨鼠標(biāo)運(yùn)動(dòng)效果，帶尾巴淡出效果。

10.Graph Layout

一種交互的力向圖布局效果，刷新三觀。

11.Typographic Effects

使用HTML5 Canvas實(shí)現(xiàn)的文本特性，效果超過Flash。

12.Crazy Tentacles

移動(dòng)鼠標(biāo)可以進(jìn)行涂鴉，點(diǎn)擊鼠標(biāo)可以清除畫布，看著確實(shí)瘋狂。

13.Nebula

吸引眼球的粒子系統(tǒng)，目的是測(cè)試WebGL性能，如果滑動(dòng)鼠標(biāo)，可以產(chǎn)生絢麗效果。

14.WebGL Globe

WebGL Globe 是一個(gè)開放的地理數(shù)據(jù)可視化平臺(tái)，我們鼓勵(lì)你復(fù)制代碼，添加自己的數(shù)據(jù)，創(chuàng)建自己的應(yīng)用。

15.Particle Playground

用鼠標(biāo)和粒子進(jìn)行交互，能發(fā)現(xiàn)不一樣的精彩。

16.Surface

使用WebGL實(shí)現(xiàn)的水面特效實(shí)驗(yàn)，可放入一張照片，使用鼠標(biāo)觸動(dòng)水面會(huì)有奇特效果。

上面的HTML5和JavaScript特效，簡直趕超F(xiàn)lash。W3Cschool上面有很多用戶留言稱HTML5和JavaScriptit將替代Flash，不過對(duì)于這種說法，也不知道怎么去評(píng)判。畢竟這些用戶說的也是很有道理，你認(rèn)為JavaScriptit會(huì)替代Flash嗎?很想知道你的答案!

公眾號(hào)：w3c技術(shù)教程

提供專業(yè)的web技術(shù)教程、手冊(cè)、工具。

66 個(gè)特效，是我歷時(shí)4個(gè)多月在油管一個(gè)一個(gè)跟著敲出來的，為了加強(qiáng)記憶，每個(gè)練習(xí)，我都錄制了視頻，在這里分享出來給大家。大家可能又會(huì)調(diào)侃了，你是工作不飽和吧，有時(shí)間做這些。其實(shí)，我目前工作還是挺飽和的，都是擠出來的。我們是9點(diǎn)上班，我基本7點(diǎn)半就到公司自學(xué)了，這樣我就有一個(gè)半小時(shí)的時(shí)間來做這些了。

對(duì)于 CSS 評(píng)價(jià)，無論是在論壇還是身邊的人，我聽到最多的是學(xué) CSS 這些花里胡哨沒啥用，實(shí)際項(xiàng)目中又用不到。聽到這些心里還是挺實(shí)受挫的，有時(shí)候會(huì)懷疑自己，我學(xué)習(xí)的方向是不是錯(cuò)了。但在幾次的項(xiàng)目需要用到一些特效，我都能很快的找到思路并做出來，我想這是得益于，我平時(shí)所學(xué)的這些特效積累出來的。

現(xiàn)在我不在困惑我所學(xué)的東西，因?yàn)閷W(xué)習(xí)成長是你自己事情，而不是別人在意的眼光。

這個(gè)系列我會(huì)一直學(xué)習(xí)下去，第一季 66 節(jié)課，已經(jīng)更完畢，所有的源碼都在下面的地址：

https://blog.csdn.net/qq449245884/category_9873715.html

01.波浪文本動(dòng)畫

效果

圖片描述

視頻地址1：https://www.ixigua.com/i6807702906041532939/

視頻地址2：https://www.bilibili.com/video/BV1Y7411m7b6

02.漣漪動(dòng)畫

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6807982622866670083/

視頻地址一：https://www.bilibili.com/video/BV1V741117Gm/

03.視頻字幕懸停特效

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1f7411Q7JD/視頻地址二：https://www.ixigua.com/i6809102422514860548/

04-新擬物單選按鈕效果

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6809529914975322632/

視頻地址二：https://www.bilibili.com/video/BV1Q7411D7LH/

05-全屏視頻背景滾動(dòng)淡出

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1nC4y1s7Dw/

視頻地址二：https://www.ixigua.com/i6809937347405152781/

06-創(chuàng)意產(chǎn)品卡

效果

圖片描述

視頻地址一：https://mp.toutiao.com/profile_v3/xigua/content-manage

視頻地址二：https://www.bilibili.com/video/BV1mt4y1m7Nw/

07.創(chuàng)意菜單項(xiàng)懸停特效

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1za4y1t73c/

視頻地址二：https://www.ixigua.com/i6812147372131353091/

08.怎么配合視頻做好 CSS 特效

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6812840842902897164/

視頻地址二：https://www.bilibili.com/video/BV1Le41147w9/

09.制作有個(gè)性的滾動(dòng)條

圖片描述

視頻地址一：https://www.bilibili.com/video/BV17e41147Gr/

視頻地址二：https://www.ixigua.com/i6813181916829712908/

10.BoxShadow 初級(jí)到高級(jí)特效

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/

視頻地址一：https://www.ixigua.com/i6814296955070448135/

11.僅使用CSS對(duì)任何SVG圖標(biāo)進(jìn)行動(dòng)畫處理

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1AA411b7tA/

視頻地址二：https://www.ixigua.com/i6814028560034955780/

12.使用 CSS3 實(shí)現(xiàn)響應(yīng)式推薦卡片

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/

視頻地址一：https://www.ixigua.com/i6814703631879635467/

13.新擬物炫酷時(shí)鐘

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1pQ4y1K76g/

視頻地址一：https://www.ixigua.com/i6815132991329665539/

14.使用 CSS Grid 實(shí)現(xiàn)瀑布流布局

效果

圖片描述

視頻地址一：https://www.ixigua.com/i6815506102424175116/

15.2.5D視差效應(yīng)

clipboard.png

視頻地址一：https://www.bilibili.com/video/BV1mT4y1G7cY/

視頻地址二：https://www.ixigua.com/i6815871539683000835/

16.純CSS3水波動(dòng)畫特效

效果

圖片描述

視頻地址：https://www.ixigua.com/i6816244424448672260/

17.圓形進(jìn)度條

效果

圖片描述

視頻地址一：https://www.bilibili.com/video/BV1qp4y1X7Jz/

視頻地址二：https://www.ixigua.com/i6816614062399422980/

18.3D透視圖與分層圖像懸停效果

效果

視頻地址一：https://www.bilibili.com/video/BV1J64y1T7XV/

視頻地址二：https://www.ixigua.com/i6817737160876098056/

19.顯示隱藏密碼框

效果

視頻地址一：https://www.bilibili.com/video/BV1UQ4y1K7oz/

視頻地址二：https://www.ixigua.com/i6818096482898412036/

20.立體卡片展示特效

效果

視頻地址一：https://www.bilibili.com/video/BV1ce411s7AG/

視頻地址二：https://www.ixigua.com/i6818471295219401219/

21.按鈕懸停特效

效果

視頻地址：https://www.ixigua.com/i6818851166034592267/

22.文字肖像和鼠標(biāo)移動(dòng)視差效果

效果：

視頻地址一：https://www.bilibili.com/video/BV1TV411d7F6/

視頻地址二：https://www.ixigua.com/i6819215565555499532/

23.輸入框驗(yàn)證特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Ak4y1k7Dm/視頻地址二：https://www.ixigua.com/i6820325547432739339/

24.粘性導(dǎo)航特效

效果：

視頻地址一：https://www.bilibili.com/video/BV15K411577L/

視頻地址二：https://www.ixigua.com/i6821071022444249611/

25.有趣的子彈聲特效

效果：

視頻演示地址一：https://www.bilibili.com/video/BV1C54y1Q7hd/

視頻演示地址二：https://www.ixigua.com/i6821449649967071748/

26.漸變發(fā)光卡片

效果：

視頻地址一：https://www.bilibili.com/video/BV1Qf4y1m7BY/

視頻地址二：https://www.ixigua.com/i6822923946040492556/

27.實(shí)現(xiàn)長陰影網(wǎng)頁特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1uA411t78K/

視頻地址二：https://www.ixigua.com/i6823670426938376716/

28.發(fā)光復(fù)選框特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1qz411z7Eq/視頻地址二：https://www.ixigua.com/i6824042494213227012/

29. 酷炫 Loading 特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1dK411W7De/

視頻地址二：https://www.ixigua.com/i6825524219757986318/

30.鼠標(biāo)移動(dòng)多彩心網(wǎng)頁特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1de411p7gc/

視頻地址二：https://www.ixigua.com/i6825893346527937038/

31.實(shí)現(xiàn)定價(jià)卡懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1mK411W7pG/

視頻地址二：https://www.ixigua.com/i6826645569625129484/

32. 3D 翻轉(zhuǎn)卡片特效

效果：

視頻地址一：https://www.bilibili.com/video/BV13K4y1t7zh

視頻地址二：https://www.ixigua.com/i6827005668893917708/

33.視頻滑塊特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Bk4y1k7QY

視頻地址二：https://www.ixigua.com/i6828124892492202500/

34.像素化圖像懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1ta4y1e7WP

視頻地址二：https://www.ixigua.com/i6828497506532327939/

35.按鈕懸停效霓虹燈特效

效果：

視頻地址一：https://www.bilibili.com/video/BV11z4y1R74N

視頻地址二：https://www.ixigua.com/i6828857444907614723/

36.笑臉評(píng)分欄特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Pt4y1y7K2/

視頻地址二：https://www.ixigua.com/i6829582434183414283/

37.鼠標(biāo)移動(dòng)線條特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1ag4y1i7E9/

視頻地址二：https://www.ixigua.com/i6830722031856648707/

38.鼠標(biāo)移動(dòng)炫酷特效

效果

視頻演示地址一：https://www.bilibili.com/video/BV1Xz411v7X9/

視頻演示地址二：https://www.ixigua.com/i6831832169350955531/

39.粘滯滾動(dòng)特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1r54y1D7Tk/

視頻地址二：https://www.ixigua.com/i6832204729552994819/

40.新擬物 checkbox 特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1iV411r7SD/

視頻地址二：https://www.ixigua.com/i6833316731788722701/

41.clip-path 滾動(dòng)特效

效果

視頻地址一：https://www.bilibili.com/video/BV1tQ4y1P7DW/

視頻地址二：https://www.ixigua.com/i6833685696041976323/

42.波浪div動(dòng)畫效果

效果

視頻地址：https://www.ixigua.com/i6834042168265409027/

43.滾動(dòng)傾斜的背景特效

效果

視頻地址一：https://www.bilibili.com/video/BV17p4y1D7UA/

視頻地址二：https://www.ixigua.com/i6834441977069568525/

44.計(jì)數(shù)器設(shè)計(jì)思路

效果：

視頻地址一：https://www.bilibili.com/video/BV1vQ4y1P7SW/

視頻地址二：https://www.ixigua.com/i6835920426430890499/

45.菜單懸停滑動(dòng)特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Sp4y1S7y7/

視頻地址二：https://www.ixigua.com/i6836281379467035147/

46.很棒的圖標(biāo)懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1ef4y127k5/

視頻地址二：https://www.ixigua.com/i6836657427052495373/

47.霓虹燈按鈕動(dòng)畫效果的懸停

效果：

視頻地址一：https://www.bilibili.com/video/BV15k4y1z7gW/

視頻地址二：https://www.bilibili.com/video/BV15k4y1z7gW/

48.窗簾響應(yīng)菜單特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1TT4y1J7qf/

視頻地址二：https://www.ixigua.com/i6838419811442098700/

49.新擬物按鈕懸停效果

效果：

視頻地址一：https://www.bilibili.com/video/BV1fv411q7AT/

視頻地址二：https://www.ixigua.com/i6838884535929668107/

50.新擬物卡片懸停特效

效果：

視頻地址一：https://www.bilibili.com/video/BV1Df4y1y7am/

視頻地址二：https://www.ixigua.com/i6839252135687750156/

51.3D圖像翻轉(zhuǎn)特效

效果：

視頻地址一：https://www.ixigua.com/i6840006472894513676/

視頻地址二：https://www.bilibili.com/video/BV15A411i7dU/

52.響應(yīng)式剪貼蒙版視差滾動(dòng)效果

效果：

視頻地址一：https://www.ixigua.com/i6841112747518722568/

視頻地址二：https://www.bilibili.com/video/BV1hv411677o/

53.網(wǎng)站夜間日間特效

效果：

視頻地址一：https://www.ixigua.com/i6841112747518722568/

視頻地址二：https://www.bilibili.com/video/BV1pa4y1Y7n9/

54.文本旋轉(zhuǎn)動(dòng)畫效果

效果：

視頻地址一：https://www.ixigua.com/i6841854545706877447/

視頻地址二：https://www.bilibili.com/video/BV1iC4y1a7wW/

55.創(chuàng)意按鈕懸停特效

效果：

視頻地址一：https://mp.toutiao.com/profile_v3/xigua/content-manage

視頻地址二：https://www.bilibili.com/video/BV1ZK411n7v7/

56.3D編輯文本特效

效果：

視頻地址一：https://www.ixigua.com/i6843709475413557764/

視頻地址二：https://www.bilibili.com/video/BV1oi4y1G7xz/

57.響應(yīng)盒模型特效

效果：

58.數(shù)字時(shí)鐘特效

效果：

視頻地址一：https://www.ixigua.com/i6844451067896267278/

視頻地址二：https://www.bilibili.com/video/BV1bp4y1U7fS/

59.彈出框與模糊的背景特效

效果

視頻地址一：https://www.ixigua.com/i6845126624082395656/

視頻地址二：https://www.bilibili.com/video/BV1bA411i75h/

60.如何在文字內(nèi)放置視頻

效果

視頻地址一：https://www.ixigua.com/6846310483146998275/

視頻地址二：https://www.bilibili.com/video/BV1B5411Y7A5/

61.反射屬性-webkit-box-reflect應(yīng)用

效果

視頻地址一：https://www.ixigua.com/6847050168638898692/

視頻地址二：https://www.bilibili.com/video/BV1iA411e7Dr/

62.漸變發(fā)光加載動(dòng)畫特效

效果

63.全屏加載頁面動(dòng)畫特效

效果

視頻地址一：https://www.ixigua.com/6848908900436017676/

視頻地址二：https://www.bilibili.com/video/BV1zK4y1s7it/

64.圣誕節(jié)動(dòng)畫特效

效果

視頻地址一：https://www.ixigua.com/6849270738138956299/

視頻地址二：https://www.bilibili.com/video/BV1g5411e7yQ/

65.粘糊糊的動(dòng)畫效果

效果

視頻地址一：https://www.ixigua.com/6850016080396714499/

視頻地址二：https://www.bilibili.com/video/BV1wK4y1x7BY/

66.電視噪音動(dòng)畫特效

效果

視頻地址一：https://www.ixigua.com/6850386816432865806/

視頻地址二：https://www.bilibili.com/video/BV1Jv411q7oh/

人才們的【三連】就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

所有特效源碼：https://blog.csdn.net/qq449245884/category_9873715.html

家好，今天給大家介紹一款，一組12個(gè)文字動(dòng)畫特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

每款都有獨(dú)立的動(dòng)畫（圖2）

圖2

每個(gè)動(dòng)畫都可以按重播按鈕重復(fù)播放（圖3）

圖3

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

圖5

本源碼編碼：10177，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10177，即可獲取。

「鏈接」

在線咨詢

上一篇：HTML 之簡介
下一篇：HTML字間距如何設(shè)置？#html

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

16個(gè)超牛逼的HTML5和JavaScript特效

01.波浪文本動(dòng)畫

02.漣漪動(dòng)畫

03.視頻字幕懸停特效

04-新擬物單選按鈕效果

05-全屏視頻背景滾動(dòng)淡出

06-創(chuàng)意產(chǎn)品卡

07.創(chuàng)意菜單項(xiàng)懸停特效

08.怎么配合視頻做好 CSS 特效

09.制作有個(gè)性的滾動(dòng)條

10.BoxShadow 初級(jí)到高級(jí)特效

11.僅使用CSS對(duì)任何SVG圖標(biāo)進(jìn)行動(dòng)畫處理

12.使用 CSS3 實(shí)現(xiàn)響應(yīng)式推薦卡片

13.新擬物炫酷時(shí)鐘

14.使用 CSS Grid 實(shí)現(xiàn)瀑布流布局

15.2.5D視差效應(yīng)

16.純CSS3水波動(dòng)畫特效

17.圓形進(jìn)度條

18.3D透視圖與分層圖像懸停效果

19.顯示隱藏密碼框

20.立體卡片展示特效

21.按鈕懸停特效

22.文字肖像和鼠標(biāo)移動(dòng)視差效果

23.輸入框驗(yàn)證特效

24.粘性導(dǎo)航特效

25.有趣的子彈聲特效

26.漸變發(fā)光卡片

27.實(shí)現(xiàn)長陰影網(wǎng)頁特效

28.發(fā)光復(fù)選框特效

29. 酷炫 Loading 特效

30.鼠標(biāo)移動(dòng)多彩心網(wǎng)頁特效

31.實(shí)現(xiàn)定價(jià)卡懸停特效

32. 3D 翻轉(zhuǎn)卡片特效

33.視頻滑塊特效

34.像素化圖像懸停特效

35.按鈕懸停效霓虹燈特效

36.笑臉評(píng)分欄特效

37.鼠標(biāo)移動(dòng)線條特效

38.鼠標(biāo)移動(dòng)炫酷特效

39.粘滯滾動(dòng)特效

40.新擬物 checkbox 特效

41.clip-path 滾動(dòng)特效

42.波浪div動(dòng)畫效果

43.滾動(dòng)傾斜的背景特效

44.計(jì)數(shù)器設(shè)計(jì)思路

45.菜單懸停滑動(dòng)特效

46.很棒的圖標(biāo)懸停特效

47.霓虹燈按鈕動(dòng)畫效果的懸停

48.窗簾響應(yīng)菜單特效

49.新擬物按鈕懸停效果

50.新擬物卡片懸停特效

51.3D圖像翻轉(zhuǎn)特效

52.響應(yīng)式剪貼蒙版視差滾動(dòng)效果

53.網(wǎng)站夜間日間特效

54.文本旋轉(zhuǎn)動(dòng)畫效果

55.創(chuàng)意按鈕懸停特效

56.3D編輯文本特效

57.響應(yīng)盒模型特效

58.數(shù)字時(shí)鐘特效

59.彈出框與模糊的背景特效

60.如何在文字內(nèi)放置視頻

61.反射屬性-webkit-box-reflect應(yīng)用

62.漸變發(fā)光加載動(dòng)畫特效

63.全屏加載頁面動(dòng)畫特效

64.圣誕節(jié)動(dòng)畫特效

65.粘糊糊的動(dòng)畫效果

66.電視噪音動(dòng)畫特效

家好，今天給大家介紹一款， 一組12個(gè)文字動(dòng)畫特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

每款都有獨(dú)立的動(dòng)畫（圖2）

每個(gè)動(dòng)畫都可以按重播按鈕重復(fù)播放（圖3）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖4）

本源碼編碼：10177，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10177，即可獲取。

您的項(xiàng)目需求

家好，今天給大家介紹一款，一組12個(gè)文字動(dòng)畫特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。