[HTML 5] 辐射式伞状网页背景特效代码下载与使用

蓝点网近期在网页背景上增加了各HTML 5特效,就是你现在可以看到的网页左右两侧的蓝色的运动像素点。

这个HTML 5特效的作者和名字具体是什么就不清楚了,因此我只能将它描述为辐射式伞状网页背景特效了。

更新:人多力量大感谢网友Ladder提供的原作者链接:https://github.com/VincentGarreau/particles.js

要想在网页是上使用这个特效是非常非常简单的,只需要将以下代码加入到网站的头部中进行加载就可以了。

<script type='text/javascript' color='102,185,255' zIndex='-10' opacity='50' count='99' src='JS'><script>
//dl.lancdn.com/landian/dev/h5/canvas/canvas-nest.min.js ===>将此文件在你服务器的地址替换掉上面的JS地址

其中核心的JavaScript建议转存到你自己的服务器上进行调用,蓝点网的下载服务器指定什么时候就会挂掉。

102.185.255代表的是线条的颜色,如果你想换颜色那么直接找个颜色类工具对应颜色找到RGB值替换即可。

该特效使用的前提是网页背景必须位于特效的下方,不然效果被网页背景遮挡了那么在前台看不到任何东西。

例如本页面正文内容就不会看到这个特效,原因是基于用户反馈效果影响阅读因此我们在正文加白色的浮层。

这样子特效是被白色的浮层遮挡在下方的,因此鼠标划过特效依然还在正常运行但经过正文时看不到效果的。

WordPress可下载该插件启用:https://github.com/aTool-org/canvas-nest-for-wp/archive/master.zip

本文来源 蓝点网,由 山外的鸭子哥 整理编辑,其版权均为 蓝点网 所有,文章内容系作者个人观点,不代表 蓝点网 对观点赞同或支持。如需转载,请注明文章来源。
1
扫码关注蓝点网微信公众号

评论:

20 条评论,访客:20 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

    • 山外的鸭子哥
      山外的鸭子哥发布于: 
      Chrome 59.0.3071.102 Chrome 59.0.3071.102 iPad iOS 10.3.1 iPad iOS 10.3.1

      无所谓了 习惯了都 只是这些资源都在蓝点网服务器 哪天我倒闭了那些转载的全部废了

  1. lxc
    lxc发布于: 
    Google Chrome 58.0.3029.81 Google Chrome 58.0.3029.81 Windows 10 64位版 Windows 10 64位版

    为什么蓝点网的这个特效没了呀?之前还有的!

    • 山外的鸭子哥
      山外的鸭子哥发布于: 
      Google Chrome 58.0.3029.96 Google Chrome 58.0.3029.96 Windows 10 64位版 Windows 10 64位版

      这个特效在Mac 10.12上会造成闪动 但不清楚具体是什么原因

  2. 幽默访客
    幽默访客发布于: 
    Google Chrome 57.0.2987.133 Google Chrome 57.0.2987.133 Windows 10 64位版 Windows 10 64位版

    参数怎么设置的,设置不是扇形……

  3. aa
    aa发布于: 
    UC Browser 6.1.2107.202 UC Browser 6.1.2107.202 Windows 8.1 64位版 Windows 8.1 64位版

    正文加白色的浮层能不能给个demo

  4. 1
    1发布于: 
    Google Chrome 59.0.3047.4 Google Chrome 59.0.3047.4 Windows 10 64位版 Windows 10 64位版

    事实上是这个玩意功耗很大……
    虽然说占用率不高,CPU频率却一直居高不下,高频率则会消耗更多的电力

    笔记本/平板用户表示强烈谴责,因为太好玩了

  5. Jachaussloef
    Jachaussloef发布于: 
    Microsoft Edge 14.14393 Microsoft Edge 14.14393 Windows 10 64位版 Windows 10 64位版

    我也是。。。前几天发现以后玩了好久 直到把所有蓝点都吸住23333

  6. lxk
    lxk发布于: 
    Safari 5.1 Safari 5.1 iPhone iOS 5.0 iPhone iOS 5.0

    做个小demo演示下就最好了?

  7. 统梦xrp
    统梦xrp发布于: 
    UC Browser 6.1.2107.204 UC Browser 6.1.2107.204 Windows 10 64位版 Windows 10 64位版

    才发现,太炫酷了!!!

  8. timer
    timer发布于: 
    Sogou Explorer Sogou Explorer Windows 10 64位版 Windows 10 64位版

    有一次玩这特效玩了10多分钟…

  9. xyz
    xyz发布于: 
    Google Chrome 58.0.3029.19 Google Chrome 58.0.3029.19 Windows 10 64位版 Windows 10 64位版

    这个特效挺酷炫

  10. 光脚满地跑
    光脚满地跑发布于: 
    Google Chrome 50.0.2661.102 Google Chrome 50.0.2661.102 Windows 10 64位版 Windows 10 64位版

    鸭子哥我第一次看到这个特效
    玩了半天233333

  11. Rambin
    Rambin发布于: 
    Google Chrome 57.0.2987.110 Google Chrome 57.0.2987.110 Windows 10 64位版 Windows 10 64位版

    像素被鼠标捕获之后速度其实是不变的,只是不断更新位置,所以玩起来还是有点不爽,不能把像素框在一起然后丢出去。。。

    • 山外的鸭子哥
      山外的鸭子哥发布于: 
      Google Chrome 57.0.2987.110 Google Chrome 57.0.2987.110 Windows 10 64位版 Windows 10 64位版

      是的 你可以理解像素点被鼠标束缚后 像素点构成的线段 一端固定在鼠标中 然后做圆周运动

发表评论