初め

ふと、思ったんですね。踏めないリンクがあったらなって

作り方

使用言語

HTML,CSS,JavaScript

コード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>逃げるaタグ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <a href="goal.html" id="nigeteruLink">クリックしてみて！</a>

    <script src="script.js"></script>
  </body>
</html>

style.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#nigeteruLink {
  position: absolute;
}

script.js

const link = document.getElementById('nigeteruLink');

link.addEventListener('mouseover', moveLink);

function moveLink() {
    const x = Math.floor(Math.random() * (window.innerWidth - link.offsetWidth));
    const y = Math.floor(Math.random() * (window.innerHeight - link.offsetHeight));
    link.style.left = x + 'px';
    link.style.top = y + 'px';
}

完成動画

おまけ

光の速さでマウスを動かしてクリアした人のためにリンク先のページも作っておきます

goal.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>おめでとう！</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="fade" id="message1">おめでとう！</p>
    <p class="fade" id="message2">でも、</p>
    <p class="fade" id="message3">暇なん？</p>
    <script src="goal.js"></script>
  </body>
</html>

style.css

.fade {
  font-size: 30px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.visible {
  opacity: 1;
}

goal.js

function fadeSequence() {
  const messages = [
      document.getElementById('message1'),
      document.getElementById('message2'),
      document.getElementById('message3')
  ];

  let current = 0;

  function showNext() {
      if (current > 0) {
          // 前のメッセージをフェードアウト
          messages[current - 1].classList.remove('visible');
      }
      if (current < messages.length) {
          // 次のメッセージをフェードイン
          messages[current].classList.add('visible');
          current++;
          // 次のメッセージを表示するまでの待機時間（表示時間 + フェード時間）
          setTimeout(showNext, 3000); // 3秒間表示
      } else {
          // 全てのメッセージを表示し終えた後の処理（必要に応じて）
      }
  }

  showNext();
}

// ページ読み込み後にシーケンスを開始
window.onload = fadeSequence;

気になる方は作って検証してみてください