展示线条动态背景的效果

这个页面将会展示线条动态背景的效果，只需要在页面中增加以下的代码即可：

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script src="https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

请点击切换至白天模式查看动态线条的效果

夜间模式无法清楚看到动态线条的效果，除非修改默认线条的颜色，具体配置如下所示：

直接修改_config.butterfly.yml配置文件中的canvas_nest配置

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

修改配置重新部署之后就可以看到效果啦：）

回到页面特效页面