静态丝带特效

blog.config.js

@@ -74,7 +74,9 @@ const BLOG = {
   NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关
 
   // 动态彩带特效
-  FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_NEST || true, // 开关
+  FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
+  // 静态彩带特效
+  RIBBON: process.env.NEXT_PUBLIC_RIBBON || true, // 开关
 
   // 星空雨特效 黑夜模式才会生效
   STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关

components/Ribbon.js

@@ -0,0 +1,85 @@
+/* eslint-disable */
+import React from 'react'
+
+export const Ribbon = () => {
+  React.useEffect(() => {
+    createRibbon()
+  }, [])
+}
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createRibbon() {
+  !(function () {
+    const t = document.getElementById('__next')
+    const e = {
+      z: n(t, 'zIndex', 0),
+      a: n(t, 'alpha', 0.6),
+      s: n(t, 'size', 90),
+      c: t.getAttribute('data-click')
+    }
+    function n(t, e, n) {
+      return Number(t.getAttribute(e)) || n
+    }
+    const i = document.createElement('canvas'),
+      o = i.getContext('2d'),
+      c = window.devicePixelRatio || 1,
+      a = window.innerWidth,
+      l = window.innerHeight,
+      d = e.s
+    let r, s
+    const u = Math
+    let h = 0
+    const g = 2 * u.PI,
+      f = u.cos,
+      m = u.random
+    function x() {
+      for (
+        o.clearRect(0, 0, a, l),
+          r = [
+            { x: 0, y: 0.7 * l + d },
+            { x: 0, y: 0.7 * l - d }
+          ];
+        r[1].x < a + d;
+
+      )
+        y(r[0], r[1])
+    }
+    function y(t, e) {
+      o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y)
+      const n = e.x + (2 * m() - 0.25) * d,
+        i = b(e.y)
+      o.lineTo(n, i),
+        o.closePath(),
+        (h -= g / -50),
+        (o.fillStyle =
+          '#' +
+          (
+            ((127 * f(h) + 128) << 16) |
+            ((127 * f(h + g / 3) + 128) << 8) |
+            (127 * f(h + (g / 3) * 2) + 128)
+          ).toString(16)),
+        o.fill(),
+        (r[0] = r[1]),
+        (r[1] = { x: n, y: i })
+    }
+    function b(t) {
+      return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s
+    }
+    ;(i.width = a * c),
+      (i.height = l * c),
+      o.scale(c, c),
+      (o.globalAlpha = e.a),
+      (i.style.cssText =
+        'opacity: ' +
+        e.a +
+        ';position:fixed;top:0;left:0;z-index: ' +
+        e.z +
+        ';width:100%;height:100%;pointer-events:none;'),
+      document.getElementsByTagName('body')[0].appendChild(i),
+      'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)),
+      x()
+  })()
+}

pages/_app.js

@@ -27,6 +27,7 @@ import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
 import { Nest } from '@/components/Nest'
 import { FlutteringRibbon } from '@/components/FlutteringRibbon'
+import { Ribbon } from '@/components/Ribbon'
 import { Sakura } from '@/components/Sakura'
 import { StarrySky } from '@/components/StarrySky'
 import MusicPlayer from '@/components/MusicPlayer'
@@ -57,6 +58,7 @@ const MyApp = ({ Component, pageProps }) => {
         {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
         {JSON.parse(BLOG.NEST) && <Nest />}
         {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
+        {JSON.parse(BLOG.RIBBON) && <Ribbon />}
     </>
 
   // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；