做着玩,其实比起本职,做站更能给我带来快乐

碧蓝航线wiki布里的实现

打开 碧蓝航线wiki,可以看见一个背景上有一个布里一直在动

按下F12,再加上刀客塔的帮助,轻松实现了这个效果

ani.js

$(document).ready(function () {
  var raf = window.requestAnimationFrame
    ? window.requestAnimationFrame
    : function (callback) {
        return setTimeout(callback, 12)
      }
  var $bulin = $('div.sprite-bulin')
  if ($bulin[0]) {
    $bulin.redraw = function () {
      $bulin.css('transform', 'translate3d(' + Math.floor($bulin.X) + 'px, ' + Math.floor($bulin.Y) + 'px, 0) ' + (!$bulin.reversed ? 'rotateY(180deg)' : ''))
    }
    var bulin_width = 130
    var range = {
      minX: -50,
      maxX: document.body.clientWidth - bulin_width + 50,
      minY: -50,
      maxY: window.innerHeight - bulin_width + 50,
    }
    $bulin.speedX = (Math.random() + 1) * 2
    $bulin.speedY = (Math.random() + 1) * 2
    $bulin.X = -130
    $bulin.Y = 0
    function bulinMove() {
      if ($bulin.X < range.minX) {
        $bulin.speedX = Math.abs($bulin.speedX)
        $bulin.reversed = !1
      } else if ($bulin.X > range.maxX) {
        $bulin.speedX = -$bulin.speedX
        $bulin.reversed = !0
      }
      $bulin.speedY = $bulin.Y < range.minY ? Math.abs($bulin.speedY) : $bulin.Y > range.maxY ? -$bulin.speedY : $bulin.speedY
      ;($bulin.X += $bulin.speedX), ($bulin.Y += $bulin.speedY)
      $bulin.redraw()
      return raf(bulinMove)
    }
    setTimeout(function () {
      $bulin.appendTo('body')
      bulinMove()
    }, 1000)
  }
})

ani.css

.sprite-bulin {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -9;
  width: 130px;
  height: 134px;
  background-image: url(https://patchwiki.biligame.com/images/blhx/5/5a/iyji9nxgx7mqj9w34ch16x393g78x6q.png);
  background-repeat: no-repeat;
  animation-name: bulinfly;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps(7);
}
@-webkit-keyframes bulinfly {
  100% {
    background-position-x: -910px;
  }
}
@-moz-keyframes bulinfly {
  100% {
    background-position-x: -910px;
  }
}
@-ms-keyframes bulinfly {
  100% {
    background-position-x: -910px;
  }
}
@-o-keyframes bulinfly {
  100% {
    background-position-x: -910px;
  }
}
@keyframes bulinfly {
  100% {
    background-position-x: -910px;
  }
}

测试用html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
        <script src="./ani.js"></script>
        <link rel="stylesheet" href="./ani.css" />
    </head>
    <body>
        <div class="sprite-bulin"></div>
    </body>
</html>

阅读全文可以看见效果

- 阅读全文 -

Excel 翻译文档工具

使用 js 实现,功能就是把 android 的翻译文件 xml,key 和 value 分开用的,解析公司的翻译文档 excel。不支持xlsx,需要的自己改,反正就一个 html 文件,直接 ctrl + s 保存就行了

下载 测试文件 ,然后再用工具选择这个文件

https://cym.cm/html/excel/index.html

萌咖脚本 MoeClub

安装成纯净的Debian系统 -d 后面的是版本

bash <(wget --no-check-certificate -qO- 'https://moeclub.org/attachment/LinuxShell/InstallNET.sh') -d 10 -v 64 -a

- 阅读全文 -

acme.sh 申请 cloudflare 泛域名证书

之前只用写一个 CF_Key 就能申请了,这次我申请证书,一直失败一直失败,后来找到解决方法

CF_Key CF_Email CF_Token CF_Account_ID CF_Zone_ID 全部都写上,再申请就行了

CF_Zone_ID 是你这个域名的ID,官网点进去右下角有