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

1
2
3
4
5
6
7
8
# 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配置

1
2
3
4
5
6
7
8
9
# 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

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


评论
avatar
竹山一叶
技术分享 个人心得
Follow Me
公告
欢迎光临小站,这里是我日常工作和学习中收集和整理的总结,希望能对你有所帮助:)

本站的内容经过个人加工总结而来,也参考了网友们分享的资料,如有侵权,请第一时间联系我,我将及时进行修改或删除😊
文章归档文章分类文章标签复制本文标题复制本文地址
随便逛逛