[博客装修] 2. 左下角添加南小鸟

恐咖兵糖收录于系列 Blog-Customization

2024-09-01 2024-09-01 约 181 字预计阅读 1 分钟次阅读条评论

系列 -

注意

本文最后更新于 2024-09-01，文中内容可能已过时。

博客页面左下角添加抢镜鸟

其实铸币大头也不错。

适用于 Hugo DoIt 主题，效果为博客页面左下角添加抢镜鸟，有一个出现的动画。根据屏幕大小和图片位置，图片大小和透明度不同。

新增于 assets/css/_custom.scss

scss

// 南小鸟

@keyframes slide-in {
  to {
    left: 0;
    bottom: 0;
  }
}

.nxn {
  // PC
  opacity: 0.9;
  position: fixed;
  bottom: -100%;
  left: -100%;
  width: 200px;
  max-width: 33%;
  z-index: -1;
  animation: slide-in 1s forwards; /* 抢镜 */

  // PAD
  @media (max-width: 1000px) {
    opacity: 0.6;
    max-width: 15%;
  }

  // PHONE
  @media (max-width: 680px) {
    opacity: 0.3;
    max-width: 33%;
  }
}

// 南小鸟
function nxn() {
  const nxn = document.createElement("img");
  // const imgList = ["","1","2","3"];
  // nxn.src = `https://cdn.ftls.xyz/images/2023/08/nxn${imgList[Math.floor(Math.random() * 4)]}.webp`;
  nxn.src = "https://cdn.ftls.xyz/images/2023/08/nxn.webp";
  nxn.className = "nxn";
  nxn.alt = "";
  document.body.appendChild(nxn);
}

目录

[博客装修] 2. 左下角添加南小鸟