image

<style>
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  img[data-src] {
    opacity: 0;
    animation: fadeIn 1s forwards;
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

  img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 600px) {
    img {
      margin: 0.5em auto;
    }
  }
</style>

image

<script>
  document.addEventListener('visibilitychange', function () {
    const originalTitle = document.title;
    const hiddenMessages = ['不来看看咱喵~?', '喵喵喵~?'];

    if (document.visibilityState === 'hidden') {
      document.title = hiddenMessages[Math.floor(Math.random() * hiddenMessages.length)];
    } else {
      document.title = '欢迎回来喵~';
      setTimeout(function () {
        document.title = originalTitle;
      }, 1000);
    }
  });
</script>