超炫网页背景效果

 2017年07月23日 13:06  4,799  5  打印本文  

本博之前用了一段时间，效果还不错，喜欢的小伙伴可以试试。

一、几何图形特效

超炫网页背景效果

方法 1：直接把以下代码添加到主题footer.php文件中即可：

  1. <script type="text/javascript">
  2.     ! function () {
  3.         function o(w, v, i) {
  4.             return w.getAttribute(v) || i
  5.         }
  6.         function j(i) {
  7.             return document.getElementsByTagName(i)
  8.         }
  9.         function l() {
  10.             var i = j("script"),
  11.                 w = i.length,
  12.                 v = i[w - 1];
  13.             return {
  14.                 l: w,
  15.                 z: o(v, "zIndex", -1),
  16.                 o: o(v, "opacity", 0.5),
  17.                 c: o(v, "color", "0,0,0"),
  18.                 n: o(v, "cotun", 99)
  19.             }
  20.         }
  21.         function k() {
  22.             r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  23.         }
  24.         function b() {
  25.             e.clearRect(0, 0, r, n);
  26.             var w = [f].concat(t);
  27.             var x, v, A, B, z, y;
  28.             t.forEach(function (i) {
  29.                 i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
  30.                 for (v = 0; v < w.length; v++) {
  31.                     x = w[v];
  32.                     if (i !== x && null !== x.x && null !== x.y) {
  33.                         B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
  34.                         y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
  35.                     }
  36.                 }
  37.                 w.splice(w.indexOf(i), 1)
  38.             }), m(b)
  39.         }
  40.         var u = document.createElement("canvas"),
  41.             s = l(),
  42.             c = "c_n" + s.l,
  43.             e = u.getContext("2d"),
  44.             r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
  45.                 window.setTimeout(i, 1000 / 45)
  46.             },
  47.             a = Math.random,
  48.             f = {
  49.                 x: null,
  50.                 y: null,
  51.                 max: 20000
  52.             };
  53.         u.id = c;
  54.         u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
  55.         j("body")[0].appendChild(u);
  56.         k(), window.onresize = k;
  57.         window.onmousemove = function (i) {
  58.             i = i || window.event, f.x = i.clientX, f.y = i.clientY
  59.         }, window.onmouseout = function () {
  60.             f.x = null, f.y = null
  61.         };
  62.         for (var t = [], p = 0; s.n > p; p++) {
  63.             var h = a() * r,
  64.                 g = a() * n,
  65.                 q = 2 * a() - 1,
  66.                 d = 2 * a() - 1;
  67.             t.push({
  68.                 x: h,
  69.                 y: g,
  70.                 xa: q,
  71.                 ya: d,
  72.                 max: 6000
  73.             })
  74.         }
  75.         setTimeout(function () {
  76.             b()
  77.         }, 100)
  78.     }();
  79. </script>

代码来自：言曌博客

配置：color 颜色：默认是（0，0，0），格式是（R,G,B）

　　　opacity 透明度：（0-1），默认 0.5

　　　count 线段的数量：默认 0.5

　　   zIndex Z 轴：默认-1

方法 2：直接在 WP 后台搜索插件 Canvas-Nest.js 安装即可。

超炫网页背景效果

喜欢特效的小伙伴，九哥推荐一款插件（直接后台搜索安装即可）：

  • WP Super Snow 下雪特效，可以更改图片，雪花可以改成任意的。

二、雪花飘落特效：

1 2
weinxin
小算草微信公众号
扫一扫关注小算草微信公众号，打开微信简简单单即可查看小算草所有内容，更快捷更方便。
Mr Y

吐槽一下

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    • avatar QQ游客 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信 【小白】
      回复 2018年1月1日 15:11

      个人不喜欢特效过多，怕网站打开速度。

      • avatar 我爱动感单车网 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信 【小白】
        回复 2017年7月23日 15:53

        个人不喜欢特效过多，怕网站打开速度。

        • avatar devoted 来自天朝的朋友 谷歌浏览器 Mac OS X 10_12_5 河北省 移动 【小白】
          回复 2017年7月23日 13:33

          页底的qq群是用php函数控制的还是html写的？

            • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Windows 7
              回复 2017年7月23日 15:32

              @devoted 你说的文章底部那个吧？那是主题设置里面的。