很喜欢背景这种三角动效,之前不会的时候是用一个搜索到的古早插件实现的,但是在这个主题下会显示到封面图层上,看起来就很奇怪。

于是通过在网上搜索,找到了纯文本实现的三角动效功能。(前后都是注释,只有一行)

<!-- #canvas-nest.js背景三角体特效代码实现,免插件
参数	说明
color	线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用 , 分割
pointColor	交点颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用 , 分割
opacity	线条透明度(0~1), 默认: 0.5
count	线条的总数量, 默认: 150
zIndex	背景的 z-index 属性,css 属性用于控制所在层的位置, 默认: -1 -->
<script color="25,25,25" opacity='0.7' zIndex="-1" count="100" src="https://cjsy.cc/wp-content/themes/Sakurairo/js/canvas-nest.js" type="text/javascript"></script>
<!-- #canvas-nest.js end -->

经过反复尝试,最后发现放在footer.php的这个位置效果最好。

这里多提一句,一般来说footer.php还有header.php是共用的部分,一般对应的页面位置也就是页脚和页眉,这点可以通过元素查看到。

最终效果如图:

届ける言葉を今は育ててる
最后更新于 2024-07-09