推荐几种简洁美观的博客背景效果

次时代小羊

已于 2023-03-15 20:27:07 修改

阅读量1.2k

点赞数 3

分类专栏：前端文章标签： css 前端

于 2023-03-14 23:31:36 首次发布

本文链接：https://blog.csdn.net/qq_45193304/article/details/129542807

版权

前端专栏收录该内容

35 篇文章

订阅专栏

文章介绍了五种用于博客背景的JavaScript动画效果，包括Canvas-Ribbon的彩带效果，three-waves的波浪效果，canvas-nest的蜂窝巢效果，canvas_lines的随机点和画线效果，以及canvas_sphere的球状光线效果。这些动态背景可以根据鼠标移动改变方向，增添博客的视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

在很多的博客网页中，都有一些非常简洁美观的博客动画背景，比如 Canvas-Ribbon、 three-waves、 canvas-nest、 canvas_lines、 canvas_sphere 等等。

背景彩带效果：Canvas-Ribbon

这种背景效果是一条颜色鲜艳的彩色丝带，随着鼠标点击可以自动变换舞动。

在 <script> 标签上可以通过几个参数调整该彩带效果：

size: 彩带宽度
alpha: 彩带透明效果
zIndex: 彩带层次

在这里插入图片描述

<script id="ribbon" size="150" alpha='0.9' zIndex="-2" src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js"></script>

波浪效果：three-waves

由小球组成的动态波浪效果，波浪起伏方向会随着鼠标的移动而改变方向。

在这里插入图片描述

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/three-waves.min.js" ></script>

蜂窝巢效果：canvas-nest

由线条组成的动态效果，线条会随着鼠标的移动和停止而不断汇聚，形成类似蜂窝巢一样的结构。

在这里插入图片描述

<script src="https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

随机点、画线效果：canvas_lines

由线条和小球组成的动态效果，线条和小球相互连接，会随着鼠标的移动而改变方向。

在这里插入图片描述

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_lines.min.js" ></script>

球状光线效果：canvas_sphere

由线条模拟光球的动态效果，光球会随着鼠标的移动而旋转改变方向。

在这里插入图片描述

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_sphere.min.js" ></script>