给网站底部添加一个黑塔转圈圈

黑塔

黑塔，米哈游出品的游戏《崩坏：星穹铁道》及其衍生作品中的角色，“天才俱乐部”#83会员，空间站「黑塔」的真正主人。智慧过人却毫无同理心的大科学家

效果图

前言

在B站上看到各种原神角色转圈圈的有趣项目，就想着给博客也添加一个。以下是网站任意处点击，即可触发黑塔转圈圈，并触发随机声音

这里本来懒得把文件另存，想直接放在博客上了。但是作为一个人民公仆，任劳任怨不算什么（小声）

正文

第一步：创建js文件

首先咱们创建个js文件，然后把以下代码粘贴上去

相应的地址记得修改哦~

// 创建图片元素
var image = new Image();
image.src = 'https://你的网址/heita.gif';
image.style.position = 'fixed';
image.style.bottom = '0';
image.style.left = '0';
image.style.visibility = 'hidden';
image.style.zIndex = '9999'; // 设置较高的 z-index

// 设置图片大小
image.style.width = '400px'; // 设置图片宽度
image.style.height = '300px'; // 设置图片高度

document.body.appendChild(image);

// 创建音频元素
var audio = new Audio();
audio.src = 'path/to/audio.mp3';

// 随机触发语音的数组
var audioList = [
  'https://你的网址/转圈圈.mp3',
  'https://你的网址/转圈圈咯.mp3',
  'https://你的网址/要坏掉了.mp3',
  'https://你的网址/gululu.mp3',
  'https://你的网址/gururu.mp3'
];

// 监听网页点击事件
document.addEventListener('click', function(event) {
  // 获取点击位置的坐标
  var clickX = event.clientX;
  var clickY = event.clientY;

  // 设置图片位置和可见性
  image.style.left = '0';
  image.style.visibility = 'visible';

  // 计算图片移动的目标位置
  var targetX = document.documentElement.clientWidth - image.width;

  // 创建动画效果
  var animation = image.animate(
    [
      { left: '0' },
      { left: targetX + 'px' }
    ],
    {
      duration: 5000, // 动画持续时间（以毫秒为单位）
      easing: 'linear', // 动画缓动函数
      fill: 'forwards' // 动画结束后保持最后的状态
    }
  );

  // 随机触发语音
  var randomIndex = Math.floor(Math.random() * audioList.length);
  audio.src = audioList[randomIndex];
  audio.play();

  // 动画完成后隐藏图片
  animation.onfinish = function() {
    image.style.visibility = 'hidden';
  };
});

第二步：下载黑塔gif动图

黑塔转圈圈动态图（特殊手段弄到的）

第三步：下载黑塔语音包

黑塔语音包（特殊手段弄到的）

点我下载

第四步：网站调用js文件

<!-- 黑塔 -->
    <script src="https://你的网址/heita.js"></script>

最后

修改后的js文件直接调用在网站上即可

如果想diy，可以试着切换不同的gif动图和语音包

祝君好运！