16个超牛逼的HTML5和JavaScript特效

用说， Flash的效果大家都清楚。实际上，HTML5和JavaScript拥有很多新属性，可以用它们来替代Flash。W3Cschool精选16个超牛逼的HTML5和JavaScript特效，看了这些特效，未来的Web发展前途无量。

1.特效：FlowerPower

创作者使用花朵作为画刷，以贝兹曲线方式绘图。

2.特效：Breathing Galaxies

动态变换直径及颜色，可通过鼠标或键盘产生新形状，这个效果不错!

3.特效：Noise Field

移动鼠标可改变粒子运动，点击可随机生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字动画特效

W3Cschool利用HTML5，制造出了粒子效果文字动画特效。只要你输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

5.特效：Swirling Tentacles

三维脉冲效果，沿着脉冲线有运动的颜色渐变模块。

6.特效：Keylight

双击生成两个以后的键即可发出声音，移动键的位置可产生不同的声音效果。W3Cschool上面有很多这样的教程，有兴趣可以去看一下！

7.特效：Rotating Spiral

旋转的螺旋效果，单击可以控制开始和停止旋转，是不是觉得高大上？

8.Blob

拖动水滴有重力效果，双击可以分离，小水滴碰到大水滴会合并。

9.Trail

彩色颗粒跟随鼠标运动效果，带尾巴淡出效果。

10.Graph Layout

一种交互的力向图布局效果，刷新三观。

11.Typographic Effects

使用HTML5 Canvas实现的文本特性，效果超过Flash。

12.Crazy Tentacles

移动鼠标可以进行涂鸦，点击鼠标可以清除画布，看着确实疯狂。

13.Nebula

吸引眼球的粒子系统，目的是测试WebGL性能，如果滑动鼠标，可以产生绚丽效果。

14.WebGL Globe

WebGL Globe 是一个开放的地理数据可视化平台，我们鼓励你复制代码，添加自己的数据，创建自己的应用。

15.Particle Playground

用鼠标和粒子进行交互，能发现不一样的精彩。

16.Surface

使用WebGL实现的水面特效实验，可放入一张照片，使用鼠标触动水面会有奇特效果。

上面的HTML5和JavaScript特效，简直赶超Flash。W3Cschool上面有很多用户留言称HTML5和JavaScriptit将替代Flash，不过对于这种说法，也不知道怎么去评判。毕竟这些用户说的也是很有道理，你认为JavaScriptit会替代Flash吗?很想知道你的答案!

公众号：w3c技术教程

提供专业的web技术教程、手册、工具。

66 个特效，是我历时4个多月在油管一个一个跟着敲出来的，为了加强记忆，每个练习，我都录制了视频，在这里分享出来给大家。大家可能又会调侃了，你是工作不饱和吧，有时间做这些。其实，我目前工作还是挺饱和的，都是挤出来的。我们是9点上班，我基本7点半就到公司自学了，这样我就有一个半小时的时间来做这些了。

对于 CSS 评价，无论是在论坛还是身边的人，我听到最多的是学 CSS 这些花里胡哨没啥用，实际项目中又用不到。听到这些心里还是挺实受挫的，有时候会怀疑自己，我学习的方向是不是错了。但在几次的项目需要用到一些特效，我都能很快的找到思路并做出来，我想这是得益于，我平时所学的这些特效积累出来的。

现在我不在困惑我所学的东西，因为学习成长是你自己事情，而不是别人在意的眼光。

这个系列我会一直学习下去，第一季 66 节课，已经更完毕，所有的源码都在下面的地址：

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

01.波浪文本动画

效果

图片描述

视频地址1：https://www.ixigua.com/i6807702906041532939/

视频地址2：https://www.bilibili.com/video/BV1Y7411m7b6

02.涟漪动画

效果

图片描述

视频地址一：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-全屏视频背景滚动淡出

效果

图片描述

视频地址一：https://www.bilibili.com/video/BV1nC4y1s7Dw/

视频地址二：https://www.ixigua.com/i6809937347405152781/

06-创意产品卡

效果

图片描述

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

视频地址二：https://www.bilibili.com/video/BV1mt4y1m7Nw/

07.创意菜单项悬停特效

效果

图片描述

视频地址一：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.制作有个性的滚动条

图片描述

视频地址一：https://www.bilibili.com/video/BV17e41147Gr/

视频地址二：https://www.ixigua.com/i6813181916829712908/

10.BoxShadow 初级到高级特效

效果

图片描述

视频地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/

视频地址一：https://www.ixigua.com/i6814296955070448135/

11.仅使用CSS对任何SVG图标进行动画处理

效果

图片描述

视频地址一：https://www.bilibili.com/video/BV1AA411b7tA/

视频地址二：https://www.ixigua.com/i6814028560034955780/

12.使用 CSS3 实现响应式推荐卡片

效果

图片描述

视频地址一：https://www.bilibili.com/video/BV1YC4y1s7kG/

视频地址一：https://www.ixigua.com/i6814703631879635467/

13.新拟物炫酷时钟

效果

图片描述

视频地址一：https://www.bilibili.com/video/BV1pQ4y1K76g/

视频地址一：https://www.ixigua.com/i6815132991329665539/

14.使用 CSS Grid 实现瀑布流布局

效果

图片描述

视频地址一：https://www.ixigua.com/i6815506102424175116/

15.2.5D视差效应

clipboard.png

视频地址一：https://www.bilibili.com/video/BV1mT4y1G7cY/

视频地址二：https://www.ixigua.com/i6815871539683000835/

16.纯CSS3水波动画特效

效果

图片描述

视频地址：https://www.ixigua.com/i6816244424448672260/

17.圆形进度条

效果

图片描述

视频地址一：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.文字肖像和鼠标移动视差效果

效果：

视频地址一：https://www.bilibili.com/video/BV1TV411d7F6/

视频地址二：https://www.ixigua.com/i6819215565555499532/

23.输入框验证特效

效果：

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

24.粘性导航特效

效果：

视频地址一：https://www.bilibili.com/video/BV15K411577L/

视频地址二：https://www.ixigua.com/i6821071022444249611/

25.有趣的子弹声特效

效果：

视频演示地址一：https://www.bilibili.com/video/BV1C54y1Q7hd/

视频演示地址二：https://www.ixigua.com/i6821449649967071748/

26.渐变发光卡片

效果：

视频地址一：https://www.bilibili.com/video/BV1Qf4y1m7BY/

视频地址二：https://www.ixigua.com/i6822923946040492556/

27.实现长阴影网页特效

效果：

视频地址一：https://www.bilibili.com/video/BV1uA411t78K/

视频地址二：https://www.ixigua.com/i6823670426938376716/

28.发光复选框特效

效果：

视频地址一：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.鼠标移动多彩心网页特效

效果：

视频地址一：https://www.bilibili.com/video/BV1de411p7gc/

视频地址二：https://www.ixigua.com/i6825893346527937038/

31.实现定价卡悬停特效

效果：

视频地址一：https://www.bilibili.com/video/BV1mK411W7pG/

视频地址二：https://www.ixigua.com/i6826645569625129484/

32. 3D 翻转卡片特效

效果：

视频地址一：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.笑脸评分栏特效

效果：

视频地址一：https://www.bilibili.com/video/BV1Pt4y1y7K2/

视频地址二：https://www.ixigua.com/i6829582434183414283/

37.鼠标移动线条特效

效果：

视频地址一：https://www.bilibili.com/video/BV1ag4y1i7E9/

视频地址二：https://www.ixigua.com/i6830722031856648707/

38.鼠标移动炫酷特效

效果

视频演示地址一：https://www.bilibili.com/video/BV1Xz411v7X9/

视频演示地址二：https://www.ixigua.com/i6831832169350955531/

39.粘滞滚动特效

效果：

视频地址一：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 滚动特效

效果

视频地址一：https://www.bilibili.com/video/BV1tQ4y1P7DW/

视频地址二：https://www.ixigua.com/i6833685696041976323/

42.波浪div动画效果

效果

视频地址：https://www.ixigua.com/i6834042168265409027/

43.滚动倾斜的背景特效

效果

视频地址一：https://www.bilibili.com/video/BV17p4y1D7UA/

视频地址二：https://www.ixigua.com/i6834441977069568525/

44.计数器设计思路

效果：

视频地址一：https://www.bilibili.com/video/BV1vQ4y1P7SW/

视频地址二：https://www.ixigua.com/i6835920426430890499/

45.菜单悬停滑动特效

效果：

视频地址一：https://www.bilibili.com/video/BV1Sp4y1S7y7/

视频地址二：https://www.ixigua.com/i6836281379467035147/

46.很棒的图标悬停特效

效果：

视频地址一：https://www.bilibili.com/video/BV1ef4y127k5/

视频地址二：https://www.ixigua.com/i6836657427052495373/

47.霓虹灯按钮动画效果的悬停

效果：

视频地址一：https://www.bilibili.com/video/BV15k4y1z7gW/

视频地址二：https://www.bilibili.com/video/BV15k4y1z7gW/

48.窗帘响应菜单特效

效果：

视频地址一：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图像翻转特效

效果：

视频地址一：https://www.ixigua.com/i6840006472894513676/

视频地址二：https://www.bilibili.com/video/BV15A411i7dU/

52.响应式剪贴蒙版视差滚动效果

效果：

视频地址一：https://www.ixigua.com/i6841112747518722568/

视频地址二：https://www.bilibili.com/video/BV1hv411677o/

53.网站夜间日间特效

效果：

视频地址一：https://www.ixigua.com/i6841112747518722568/

视频地址二：https://www.bilibili.com/video/BV1pa4y1Y7n9/

54.文本旋转动画效果

效果：

视频地址一：https://www.ixigua.com/i6841854545706877447/

视频地址二：https://www.bilibili.com/video/BV1iC4y1a7wW/

55.创意按钮悬停特效

效果：

视频地址一：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.响应盒模型特效

效果：

58.数字时钟特效

效果：

视频地址一：https://www.ixigua.com/i6844451067896267278/

视频地址二：https://www.bilibili.com/video/BV1bp4y1U7fS/

59.弹出框与模糊的背景特效

效果

视频地址一：https://www.ixigua.com/i6845126624082395656/

视频地址二：https://www.bilibili.com/video/BV1bA411i75h/

60.如何在文字内放置视频

效果

视频地址一：https://www.ixigua.com/6846310483146998275/

视频地址二：https://www.bilibili.com/video/BV1B5411Y7A5/

61.反射属性-webkit-box-reflect应用

效果

视频地址一：https://www.ixigua.com/6847050168638898692/

视频地址二：https://www.bilibili.com/video/BV1iA411e7Dr/

62.渐变发光加载动画特效

效果

63.全屏加载页面动画特效

效果

视频地址一：https://www.ixigua.com/6848908900436017676/

视频地址二：https://www.bilibili.com/video/BV1zK4y1s7it/

64.圣诞节动画特效

效果

视频地址一：https://www.ixigua.com/6849270738138956299/

视频地址二：https://www.bilibili.com/video/BV1g5411e7yQ/

65.粘糊糊的动画效果

效果

视频地址一：https://www.ixigua.com/6850016080396714499/

视频地址二：https://www.bilibili.com/video/BV1wK4y1x7BY/

66.电视噪音动画特效

效果

视频地址一：https://www.ixigua.com/6850386816432865806/

视频地址二：https://www.bilibili.com/video/BV1Jv411q7oh/

人才们的【三连】就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

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

家好，今天给大家介绍一款，一组12个文字动画特效html页面源码，（图1）。送给大家哦，获取方式在本文末尾。

图1

每款都有独立的动画（图2）

图2

每个动画都可以按重播按钮重复播放（图3）

图3

源码完整，需要的朋友可以下载学习（图4）

图5

本源码编码：10177，需要的朋友，点击下面的链接后，搜索10177，即可获取。

「链接」

在线咨询

上一篇：HTML 之简介
下一篇：HTML字间距如何设置？#html

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

16个超牛逼的HTML5和JavaScript特效

01.波浪文本动画

02.涟漪动画

03.视频字幕悬停特效

04-新拟物单选按钮效果

05-全屏视频背景滚动淡出

06-创意产品卡

07.创意菜单项悬停特效

08.怎么配合视频做好 CSS 特效

09.制作有个性的滚动条

10.BoxShadow 初级到高级特效

11.仅使用CSS对任何SVG图标进行动画处理

12.使用 CSS3 实现响应式推荐卡片

13.新拟物炫酷时钟

14.使用 CSS Grid 实现瀑布流布局

15.2.5D视差效应

16.纯CSS3水波动画特效

17.圆形进度条

18.3D透视图与分层图像悬停效果

19.显示隐藏密码框

20.立体卡片展示特效

21.按钮悬停特效

22.文字肖像和鼠标移动视差效果

23.输入框验证特效

24.粘性导航特效

25.有趣的子弹声特效

26.渐变发光卡片

27.实现长阴影网页特效

28.发光复选框特效

29. 酷炫 Loading 特效

30.鼠标移动多彩心网页特效

31.实现定价卡悬停特效

32. 3D 翻转卡片特效

33.视频滑块特效

34.像素化图像悬停特效

35.按钮悬停效霓虹灯特效

36.笑脸评分栏特效

37.鼠标移动线条特效

38.鼠标移动炫酷特效

39.粘滞滚动特效

40.新拟物 checkbox 特效

41.clip-path 滚动特效

42.波浪div动画效果

43.滚动倾斜的背景特效

44.计数器设计思路

45.菜单悬停滑动特效

46.很棒的图标悬停特效

47.霓虹灯按钮动画效果的悬停

48.窗帘响应菜单特效

49.新拟物按钮悬停效果

50.新拟物卡片悬停特效

51.3D图像翻转特效

52.响应式剪贴蒙版视差滚动效果

53.网站夜间日间特效

54.文本旋转动画效果

55.创意按钮悬停特效

56.3D编辑文本特效

57.响应盒模型特效

58.数字时钟特效

59.弹出框与模糊的背景特效

60.如何在文字内放置视频

61.反射属性-webkit-box-reflect应用

62.渐变发光加载动画特效

63.全屏加载页面动画特效

64.圣诞节动画特效

65.粘糊糊的动画效果

66.电视噪音动画特效

家好，今天给大家介绍一款， 一组12个文字动画特效html页面源码，（图1）。送给大家哦，获取方式在本文末尾。

每款都有独立的动画（图2）

每个动画都可以按重播按钮重复播放（图3）

源码完整，需要的朋友可以下载学习（图4）

本源码编码：10177，需要的朋友，点击下面的链接后，搜索10177，即可获取。

您的项目需求

家好，今天给大家介绍一款，一组12个文字动画特效html页面源码，（图1）。送给大家哦，获取方式在本文末尾。