• 欢迎访问望星湖畔,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入望星湖畔 QQ群
  • 由于360网盘即将关闭,本站内部分下载资源可能暂时无法下载,请到相关文章评论处留言,我们会马上处理,谢谢合作!
  • 本站正在搬家,各项数据恢复中……

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

WP插件 admin 843次浏览 1个评论

近期在网页背景上增加了个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

望星湖畔, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明[HTML 5] 辐射式伞状网页背景特效代码下载与使用
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 这个特效真的挺不错的,现在看到好多博客都在用这个特效。
    SEO自学网2017-04-11 20:52 回复