🎀 简单一条命令为你的网页添加canvas-ribbon背景彩带。 效果展示:
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
index.html initial Apr 8, 2017
readme.md initial Apr 8, 2017

readme.md

canvas-ribbon.js

重写了Vue作者博客中的canvas背景彩带,简单一条命令为你的网站加上canvas-ribbon背景动画。

鼠标每次点击,随机生成彩带背景。

1. 使用

在页面中插入以下语句。

<script id="ribbon" src="js/canvas-ribbon.js"></script>

注意此处要为script标签设置 id="ribbon" 。插入位置任意,推荐插入到 </body> 标签上面。

2. 配置

可自定义背景彩带的宽度、透明度和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>

不设置时为默认属性。