PIX主题文档
菜单
本页目录

可控主区域宽度样式 (主题设置 自定义CSS添加)

@media only screen and (min-width: 1366px) {
  body.mod_third .main_wrap , body.mod_third .go_top_box {
        max-width:1250px;
  }
  body.mod_third .left_nav{
        width: 23.6%;
  }
  body.mod_third .main_sidebar{
        width: 23.6%;
  }
  body.mod_third .page_main{
        width: 52.8%;
  }
}

时钟

侧边栏->自定义内容->内容

Snipaste_2024-09-02_01-15-37.png

<canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>
  <script>
    (function(){var t=820;var a=250;var r=7;var n=10;var e=.65;var f;var o=[];const v=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];var h=[];var u=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]];function l(t){var a=[];f.fillStyle="#005EAC";var r=new Date;var e=70,o=30;var v=r.getHours();var u=Math.floor(v/10);var l=v%10;a.push({num:u});a.push({num:l});a.push({num:10});var c=r.getMinutes();var u=Math.floor(c/10);var l=c%10;a.push({num:u});a.push({num:l});a.push({num:10});var M=r.getSeconds();var u=Math.floor(M/10);var l=M%10;a.push({num:u});a.push({num:l});for(var p=0;p<a.length;p++){a[p].offsetX=e;e=m(e,o,a[p].num,t);if(p<a.length-1){if(a[p].num!=10&&a[p+1].num!=10){e+=n}}}if(h.length==0){h=a}else{for(var C=0;C<h.length;C++){if(h[C].num!=a[C].num){s(a[C]);h[C].num=a[C].num}}}i(t);g();return r}function s(t){var a=t.num;var n=u[a];for(var e=0;e<n.length;e++){for(var f=0;f<n[e].length;f++){if(n[e][f]==1){var h={offsetX:t.offsetX+r+r*2*f,offsetY:30+r+r*2*e,color:v[Math.floor(Math.random()*v.length)],g:1.5+Math.random(),vx:Math.pow(-1,Math.ceil(Math.random()*10))*4+Math.random(),vy:-5};o.push(h)}}}}function i(t){for(var a=0;a<o.length;a++){t.beginPath();t.fillStyle=o[a].color;t.arc(o[a].offsetX,o[a].offsetY,r,0,2*Math.PI);t.fill()}}function g(){var n=0;for(var f=0;f<o.length;f++){var v=o[f];v.offsetX+=v.vx;v.offsetY+=v.vy;v.vy+=v.g;if(v.offsetY>a-r){v.offsetY=a-r;v.vy=-v.vy*e}if(v.offsetX>r&&v.offsetX<t-r){o[n]=o[f];n++}}for(;n<o.length;n++){o.pop()}}function m(t,a,n,e){var f=u[n];for(var o=0;o<f.length;o++){for(var v=0;v<f[o].length;v++){if(f[o][v]==1){e.beginPath();e.arc(t+r+r*2*v,a+r+r*2*o,r,0,2*Math.PI);e.fill()}}}e.beginPath();t+=f[0].length*r*2;return t}var c=document.getElementById("canvas");c.width=t;c.height=a;f=c.getContext("2d");var M=new Date;setInterval(function(){f.clearRect(0,0,f.canvas.width,f.canvas.height);l(f)},50)})();
  </script>

添加雪花飘落特效代码(主题设置 底部HTML代码添加)

提供者

<script  src="https://unpkg.com/magic-snowflakes@6.0.1/dist/snowflakes.min.js"> </script>
<script>var sf = new Snowflakes({color: "#CCCCCC"}); </script>

右下角蒲公英(主题设置 底部HTML代码添加)

<style>
  @media screen and (max-width:600px) {
    .dandelion {
      display: none !important;
    }
  }

  .dandelion span {
    pointer-events: none;
    display: block;
    position: fixed;
    z-index: 9999999999;
    bottom: 0px;
    background-image: url('https://api.minio.yyds.pink/pix/2024/1/1667906264482ea2208363852e846-buzspris.png');
    background-repeat: no-repeat;
    _background: none;
    -webkit-animation: ball-x 3s linear 2s infinite;
    -moz-animation: ball-x 3s linear 2s infinite;
    animation: ball-x 3s linear 2s infinite;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    transform-origin: bottom center;
  }

  .dandelion .bigdan {
    width: 64px;
    height: 115px;
    right: 41px;
    background-position: -86px -36px;
    border: 0px solid #fff;
  }

  .dandelion .smalldan {
    width: 36px;
    height: 60px;
    right: 88px;
    background-position: 0 -90px;
    border: 0px solid #fff;
  }

  @keyframes ball-x {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(5deg);
    }

    50% {
      transform: rotate(0deg);
    }

    75% {
      transform: rotate(-5deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  @-webkit-keyframes ball-x {
    0% {
      -webkit-transform: rotate(0deg);
    }

    25% {
      -webkit-transform: rotate(5deg);
    }

    50% {
      -webkit-transform: rotate(0deg);
    }

    75% {
      -webkit-transform: rotate(-5deg);
    }

    100% {
      -webkit-transform: rotate(0deg);
    }
  }

  @-moz-keyframes ball-x {
    0% {
      -moz-transform: rotate(0deg);
    }

    25% {
      -moz-transform: rotate(5deg);
    }

    50% {
      -moz-transform: rotate(0deg);
    }

    75% {
      -moz-transform: rotate(-5deg);
    }

    100% {
      -moz-transform: rotate(0deg);
    }
  }
</style>
<div class="dandelion"><span class="smalldan"></span><span class="bigdan"></span></div>
上一篇 Pix主题简介
下一篇 ⚠️常见问题