一个WordPress超酷炫网页背景效果canvas-nest

2020 年 04 月 08 日

59 次浏览

921字数

<h2>简介</h2>
一个基于<code>html5</code>画布绘制的网页背景效果，非常赞！如果需要<code>wordpress</code>插件，在插件库搜索<code>canvas-nest</code>或者看项目<a href="https://github.com/aTool-org/canvas-nest-for-wp" target="_blank" rel="noopener noreferrer">canvas-nest-for-wp</a>。

在线演示：<code>http://www.atool.org/</code>。
<div data-unique="特征"></div>
<h2>特征</h2>
<ul>
 	<li>不依赖于<code>jQuery</code>或其他<code>JavaScript</code>框架。</li>
 	<li>很轻，只有<code>1.6kb</code>。</li>
 	<li>所以很容易使用，即使你不是网页开发者。</li>
</ul>
<div data-unique="用法"></div>
<h2>用法</h2>
在<code>&lt;body&gt;</code>和<code>&lt;/body&gt;</code>中间插入这段<code>js</code>代码即可，注意不要放在<code>head</code>里面。
<pre><code class="hljs xml">&lt; script src = “ //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js ” &gt; &lt;/ script &gt;
</code></pre>
如下所示：
<pre><code class="hljs xml">&lt; html &gt;
&lt; head &gt;
 ...
&lt;/ head &gt;
&lt; body &gt;
 ...
 ...
 ...
 &lt; script src = “ //cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js ” &gt; &lt; / script &gt;
&lt;/ body &gt;
&lt;/ html &gt;
</code></pre>
<div data-unique="配置"></div>
<h2>配置</h2>
<ul>
 	<li>color：画布线颜色，默认值：'0,0,0'; 颜色为（R，G，B）。</li>
 	<li>opacity：线的不透明度（0〜1），默认值：0.5。</li>
 	<li>count：行数，默认值：150。</li>
 	<li>zIndex：z空间的索引，默认值：-1。</li>
</ul>
例如：
<pre><code class="hljs xml">&lt;script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"&gt;&lt;/script&gt;
</code></pre>

最后修改：2022 年 08 月 02 日