重写了Vue作者博客中的canvas背景彩带,简单一条命令为你的网站加上canvas-ribbon背景动画。
鼠标每次点击,随机生成彩带背景。
在页面中插入以下语句。
<script id="ribbon" src="js/canvas-ribbon.js"></script>
注意此处要为script标签设置 id="ribbon"
。插入位置任意,推荐插入到 </body>
标签上面。
可自定义背景彩带的宽度、透明度和z-index属性
size
: 彩带宽度, 默认:90
.alpha
: 彩带透明度, 默认:0.6
.zIndex
: 彩带html标签的z-index属性, 默认:-1
.
例:
<script id="ribbon" size="150" alpha='0.3' zIndex="-2" src="js/canvas-ribbon.js"></script>
不设置时为默认属性。
Jensonhui's blog: https://jensonhui.top