# Halloween Decorations 👻

**URL:** <https://meta.discourse.org/t/halloween-decorations/207572>\
**Category:** Theme component\
**Tags:** official, desktop, halloween-decorations\
**Created:** [October 29, 2021, 5:39pm UTC](https://meta.discourse.org/t/halloween-decorations/207572 "2021-10-29T17:39:41Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas)\
**Post date:** [October 14, 2024, 10:44pm UTC](https://meta.discourse.org/t/halloween-decorations/207572/6 "2024-10-14T22:44:32Z")

</div>

![This is an image of an illustrated, stylized cat with a background of a solid blue color. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/d/2/3d2c81732c5a8ea8a12bfe62e13ea81394bbf305.jpeg)

I think it’s possible to get an open screen animation when clicking into the forum that also hides the content in the refresher

```plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #custom-video-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2cb9e4;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: visibility 0s 1s, opacity 1s linear; /* 添加过渡效果 */
      visibility: visible;
      opacity: 1;
    }

    #custom-video {
      width: auto; /* 设置宽度为100% */
      height: auto; /* 高度自动适应 */
    }
  </style>
</head>
<body>
  <div id="custom-video-container">
    <video id="custom-video" autoplay muted>
      <source src="https://www.justnainai.com/uploads/default/original/2X/e/e4faa6e98fd8890bbd33a24ef27f63cbb30a9d16.mp4" type="video/mp4">
    </video>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const videoContainer = document.getElementById('custom-video-container');
      const video = document.getElementById('custom-video');

      video.addEventListener('ended', () => {
        setTimeout(() => {
          videoContainer.style.visibility = 'hidden';
          videoContainer.style.opacity = '0';
        }, 10); // 视频结束后3秒钟隐藏
      });
    });
  </script>
</body>
</html>

```

---

_[View the full topic](https://meta.discourse.org/t/halloween-decorations/207572)._
