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技术教程、手册、工具。

这里分享一个我平时常用的水波特效步骤，加在按钮上特好使。

首先，是直接创建一个div盒子，不需要在里面添加其他内容，我们直接对盒子本身添加css就能形成水波效果。

html部分，我们div添加白色的波纹，所以在这里设置html背景为蓝色。

<body style="background-color: cadetblue ;"> 
  <div class="video"></div>
</body>

css部分，先设置好div的基本属性

.video {
  /* 基本属性 */
  width: 100px;
  height: 100px;
  border-radius: 50px;

  /* 给背景颜色添加不透明度 */

  /* 不透明度还可以通过添加opacity属性修改 */
  background-color: rgb(255, 255, 255, 0.6);
}

然后就是在video中添加这个特效中重中之重的内容，在css中设置animation。

Animation 是由三部分组成。

关键帧(keyframes) – 以帧的形式定义动画在不同阶段的状态。

如果是不同时间下形状发生的变化大多可以用动画的0%，50%，100%表示不同帧对象的变化
如果是不同时间下位置发生的变化大多可以用from，to来表示不同帧对象的变化

动画属性(properties) – 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。

语法：name duration timing-function delay iteration-count direction fill-mode play-state;

css属性 – 就是css元素来表示不同关键帧下的状态。

.video {
  /* 添加ripple动画效果 */
  /* -webkit-animation适配-webkit内核的浏览器*/
  -webkit-animation: ripple 1s linear infinite;
  animation: ripple 1s linear infinite;
}

/* 定义ripple动画效果 */
@-webkit-keyframes ripple {
  /* 关键帧播放到0%时的状态 */
  0% {
    /* 在box四周添加三层白色阴影 */
    box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
    0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%);
  }
  
  /* 关键帧播放到100%时的状态 */
  100% {
    /* 分别改变三层阴影的距离
    形成两帧的动画,然后在transition的过渡下形成动画 */
    box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%), 
    0 0 0 40px rgba(50, 100, 245, 0);
  }
}

/* 多种浏览器兼容性设置 */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
    0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%);
  }

  100% {
    box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%), 
    0 0 0 40px rgba(50, 100, 245, 0);
  }
}

其中，linear是表示动画的timing-function，其总共大致有以下几种效果。

图源水印

为了实现按钮的响应式操作，我们可以给div再加上一个hover选择器

/* 鼠标悬浮时的状态 */
.video:hover {
  /* 背景颜色不透明度变化 */
  background-color: #FFFFFF;  

  /* 将对象放大1.2倍 */
  transform: scale(1.2); 
}

再给div添加一个transition属性，让div在鼠标移动的时候能自然过渡，其原理跟animation类似。

.video {
  /* 添加动画的过渡效果 */
  transition: all 0.3s ease-in-out;
}

然后就能得到我们的结果，整体的代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .video {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: rgb(255, 255, 255, 0.6);
        transition: all 0.3s ease-in-out;
        -webkit-animation适配-webkit内核的浏览器*/
        -webkit-animation: ripple 1s linear infinite;
        animation: ripple 1s linear infinite;
      }

      .video:hover {
        background-color: #FFFFFF;
        transform: scale(1.2);   
      }
      @-webkit-keyframes ripple {
        0% {
          /* 在box四周添加三层白色阴影 */
          box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
          0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%);
        }
        
        100% {
          /* 分别改变三层阴影的距离
          形成两帧的动画,然后在transition的过渡下形成动画 */
          box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%), 
          0 0 0 40px rgba(50, 100, 245, 0);
        }
      }
      @keyframes ripple {
        0% {
          box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
          0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%);
        }
        100% {
          box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%), 
          0 0 0 40px rgba(50, 100, 245, 0);
        }
      }
    </style>
  </head>
  <body style="background-color: cadetblue ;"> 
    <div class="video"></div>
  </body>
</html>

效果图

签云效果，可用于展示数据展示的页面，可以在标签下增加动画效果，让用户体验更加直观！

用CSS3的属性来实现该效果

有兴趣的小伙伴可以学习，如有错误之处，欢迎指出纠正！

实现的效果图

动态效果下面可以看到在一定的区域内容中，设定的标签词条会左右上下来回运动着

下面说说实现代码

html结构：

css样式：

在线咨询

上一篇：html+SpringBoot超大视频上传解决方案
下一篇：如何零基础web（网页）前端学习路线？

您的项目需求

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

整合营销服务商

16个超牛逼的HTML5和JavaScript特效

您的项目需求