博客园特效

CSP第2轮模板代码

前提：拥有js权限

1.星空连线

<script type="text/javascript">
!function(){
  var CONFIG_COLOR = "47,135,193";    //颜色
  var CONFIG_OPACITY = 0.8;    //透明度
  var CONFIG_COUNT = 99;    //星星数量
  var CONFIG_MAX = 20000;    //星星间连线距离
  var CONFIG_MOUSE_MAX = 5000;    //鼠标连线距离

  var prevA = 0, prevC = 0;
  function o(){
    prevA = a || window.innerWidth;
    prevC = c || window.innerHeight;
    a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    if (s && s.length && prevA && prevC) {
      var rx = a / prevA, ry = c / prevC;
      for (var i = 0; i < s.length; i++) {
        s[i].x *= rx;
        s[i].y *= ry;
      }
    }
  }
  function i(){
    r.clearRect(0,0,a,c);
    var n,e,t,o,m,l;
    s.forEach(function(i,x){
      for(i.x+=i.xa, i.y+=i.ya, i.xa*=i.x>a||i.x<0?-1:1, i.ya*=i.y>c||i.y<0?-1:1, r.fillRect(i.x-.5,i.y-.5,1,1), e=x+1;e<u.length;e++){
        n=u[e];
        if(null!==n.x && null!==n.y){
          o=i.x-n.x, m=i.y-n.y, l=o*o+m*m;
          if(l<n.max){
            if(n===y && l>=n.max/2){ i.x-=.03*o, i.y-=.03*m; }
            t=(n.max-l)/n.max;
            r.beginPath();
            r.lineWidth=t/2;
            r.strokeStyle="rgba("+CONFIG_COLOR+","+(t+.2)+")";
            r.moveTo(i.x,i.y);
            r.lineTo(n.x,n.y);
            r.stroke();
          }
        }
      }
    });
    x(i);
  }

  var a,c,u,m=document.createElement("canvas"), l="c_n", r=m.getContext("2d"),
      x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},
      w=Math.random, y={x:null,y:null,max:CONFIG_MOUSE_MAX};
      
  m.id=l;
  m.style.cssText="position:fixed;top:0;left:0;z-index:9998;opacity:"+CONFIG_OPACITY+";pointer-events:none;";
  document.getElementsByTagName("body")[0].appendChild(m);
  
  o();
  window.addEventListener('resize', o);
  window.addEventListener('mousemove', function(n){ n=n||window.event; y.x=n.clientX; y.y=n.clientY; }, { passive: true });
  window.addEventListener('mouseout', function(){ y.x=null; y.y=null; });

  for(var s=[], f=0; f<CONFIG_COUNT; f++){
    var h=w()*a, g=w()*c, v=2*w()-1, p=2*w()-1;
    s.push({x:h, y:g, xa:v, ya:p, max:CONFIG_MAX});
  }
  u=s.concat([y]);
  setTimeout(function(){ i(); }, 100);
}();
</script>

2.点击特效

<canvas id="clickCanvas" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;"></canvas>
<script>
(function () {
  var canvas = document.getElementById('clickCanvas');
  if (!canvas) return;
  var ctx = canvas.getContext('2d');
  var W, H;
  function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
  resize();
  window.addEventListener('resize', resize);
  var particles = [];
  var COLORS = ['#ff6b6b', '#feca57', '#48dbfb', '#1dd1a1', '#ff9ff3', '#54a0ff', '#f368e0'];
  var TEXTS = [
    'AC', 'WA', 'TLE', 'MLE', 'RE', 'CE', 'PE', 'OLE', 'UKE',
    'AC!', 'AC!!', 'AC!!!', 'WA?', 'TLE?', 'RE?',
    '0 pts', 'Pending', 'Judging', 'Compiling', 'Running'
  ];    //词库
  document.addEventListener('click', function (e) {
    if (e.target.closest('#toc') || e.target.closest('.CodeMirror')) return;
    var count = 18;
    for (var i = 0; i < count; i++) {
      var angle = (Math.PI * 2 * i) / count + Math.random() * 0.3;
      var speed = Math.random() * 4 + 2;
      particles.push({
        x: e.clientX, y: e.clientY,
        vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed,
        r: Math.random() * 3 + 2,
        color: COLORS[Math.floor(Math.random() * COLORS.length)],
        life: 1
      });
    }
    if (rafId === null) { rafId = requestAnimationFrame(animate); }
    var textEl = document.createElement('span');
    textEl.textContent = TEXTS[Math.floor(Math.random() * TEXTS.length)];
    textEl.style.cssText =
      'position:fixed;left:' + e.clientX + 'px;top:' + e.clientY + 'px;' +
      'font-size:22px;font-weight:bold;pointer-events:none;z-index:10000;' +
      'font-family:"SF Mono","Fira Code",Consolas,monospace;' +
      'color:' + COLORS[Math.floor(Math.random() * COLORS.length)] + ';' +
      'text-shadow:0 0 8px rgba(0,0,0,0.6);' +
      'transition:transform 1.2s ease-out, opacity 1.2s ease-out;';
    document.body.appendChild(textEl);
    requestAnimationFrame(function () {
      textEl.style.transform = 'translate(-50%, -120px) scale(1.4)';
      textEl.style.opacity = '0';
    });
    setTimeout(function () { textEl.remove(); }, 1300);
  });
  var rafId = null;
  function animate() {
    ctx.clearRect(0, 0, W, H);
    if (particles.length === 0) { rafId = null; return; }
    for (var i = particles.length - 1; i >= 0; i--) {
      var p = particles[i];
      p.x += p.vx; p.y += p.vy;
      p.vy += 0.08; p.vx *= 0.98; p.vy *= 0.98;
      p.life -= 0.025;
      if (p.life <= 0) { particles.splice(i, 1); continue; }
      ctx.globalAlpha = p.life;
      ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fillStyle = p.color; ctx.fill();
    }
    ctx.globalAlpha = 1;
    rafId = requestAnimationFrame(animate);
  }
})();
</script>

3.水车鼠标

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function() {
  if (window.matchMedia("(pointer: coarse)").matches) return;

  function tryInit(attempt) {
    attempt = attempt || 0;
    if (typeof window.jQuery === 'undefined' || typeof window.jQuery.shuicheMouse !== 'function') {
      if (attempt > 50) return;
      setTimeout(function() { tryInit(attempt + 1); }, 200);
      return;
    }

    window.jQuery.shuicheMouse({ type: 11, color: false });

    var fixStyle = function() {
      var c = document.getElementById('shuicheCanvas');
      if (c) {
        c.style.zIndex = '10005';
        c.style.pointerEvents = 'none';
      }
    };
    fixStyle();
    setTimeout(fixStyle, 300);
    setTimeout(fixStyle, 800);
    setTimeout(fixStyle, 1500);
  }

  var s = document.createElement('script');
  s.src = "https://blog-static.cnblogs.com/files/blogs/880146/mouse.min.js";
  s.onload = function() { tryInit(0); };
  s.onerror = function() {}; 
  document.body.appendChild(s);
})();
</script>

4.鼠标样式

<style>
#custom-cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100000; opacity: 1;
}
#custom-cursor #cursor-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border: 2px solid #79b8ff; border-radius: 10px; box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
#custom-cursor #cursor-dot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background-color: #5ed6cb; border-radius: 2px;
  transition: all 0.3s ease-in-out;
}
#custom-cursor.clicking #cursor-dot {
  transform: translate(-50%, -50%) scale(3);
  opacity: 0.6; transition: all 0.15s ease-out;
}
#custom-cursor.clicking #cursor-ring {
  border-width: 1px; border-color: #5ed6cb;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0.6; transition: all 0.3s ease-out;
}
body.custom-cursor-on,
body.custom-cursor-on * { cursor: none !important; }
body.custom-cursor-on textarea,
body.custom-cursor-on input { cursor: text !important; }
</style>
<div id="custom-cursor">
  <div id="cursor-ring"></div>
  <div id="cursor-dot"></div>
</div>
<script>
(function () {
  if (window.matchMedia("(pointer: coarse)").matches) return;

  var cursor = document.getElementById('custom-cursor');
  if (!cursor) return;
  document.body.classList.add('custom-cursor-on');

  var mouseX = window.innerWidth / 2, mouseY = window.innerHeight / 2;
  var cursorX = mouseX, cursorY = mouseY;

  document.addEventListener('mousemove', function (e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    var isInput = e.target.closest('textarea, input, .CodeMirror');
    cursor.style.opacity = isInput ? '0' : '1';
    startCursorLoop();
  }, { passive: true });

  var cursorRaf = null;
  var lastX = mouseX, lastY = mouseY;
  function renderCursor() {
    cursorX += (mouseX - cursorX) * 0.6;
    cursorY += (mouseY - cursorY) * 0.6;
    cursor.style.transform = 'translate(' + cursorX + 'px,' + cursorY + 'px) translate(-50%, -50%)';

    var settled = Math.abs(mouseX - cursorX) < 0.1 && Math.abs(mouseY - cursorY) < 0.1;
    var moved = mouseX !== lastX || mouseY !== lastY;
    lastX = mouseX; lastY = mouseY;

    if (settled && !moved) { cursorRaf = null; return; }
    cursorRaf = requestAnimationFrame(renderCursor);
  }
  function startCursorLoop() {
    if (cursorRaf === null) cursorRaf = requestAnimationFrame(renderCursor);
  }
  startCursorLoop();

  document.addEventListener('mousedown', function () { cursor.classList.add('clicking'); });
  document.addEventListener('mouseup', function () { cursor.classList.remove('clicking'); });
  document.addEventListener('mouseleave', function () { cursor.style.opacity = '0'; });
  document.addEventListener('mouseenter', function () { cursor.style.opacity = '1'; });
})();
</script>

特效放在页脚html里