学做网站培训课程介绍

当前位置:

「网站特效」html5 canvas粒子线条特效制作方法

canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中canvas标签来实现粒子炫酷背景特效。(如果你不了解HTML5,可以先学习一下html5从入门教程。)

效果可能本网页,鼠标在屏幕上会有多个几何线条的背景特效。 如果你在自己建网站过程中也想在自己的网站上显示这样的背景特效,就可以按照下面的方法操作。

html5 canvas粒子线条特效

实现这种效果我们只需要使用一个canvas-nest.min.js的文件就可以了,不需要再自己书写,具体实现步骤如下:

基础用法:

1、可以直接引用bootcss的CDN代码:

<script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

2、把以上js代码放置到页面的body标签中,不要放在头部里面;

3、如果想修改粒子线条的颜色或其他参数可以直接在引用的js标签中使用以下格式: color: 线条颜色, 默认: ‘0,0,0’ (R,G,B) opacity: 线条透明度, 默认(0~1): 0.5 zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1 例如:

<script color="0,0,255" opacity="0.7" zIndex="-2" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

以上三个步骤就完成了基础的用法,下面我们还可以根据需求做些修改。因为这段js是针对canvas实现的特效,所以我们可以直接使用这个标签把特效应用到合适的位置。

另一种用法

使用canvas标签单独定义显示位置

1、同样放置以下代码到页面body标签中;

<canvas id="cas"></canvas> <script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

2、通过定义id cas的样式进行样式控制和是否显示,例如:

#cas{position:fixed;top:0;left:0;z-index:-2;opacity:0.4}

《“「网站特效」html5 canvas粒子线条特效制作方法”》 有 1 条评论

  1. 学习建网站学员 在线工具说道:

    项目是开源的,开源地址在这里:https://github.com/hustcc/canvas-nest.js

    希望博主可以加一下

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 我们在制作一些图片网站,由于图片比较多的情况,可以使用先让用户看到一些图片的缩略图,然后通过光标移动到小图后,显示大图的效果,就叫做图片相册
  • canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大