云端漫步 发表于 2025-11-26 16:05:10

【漫步特效】灯火对照伶人对笑

<style>
      #container {
            margin: 130px 0 30px calc(50% - 800px);
            width: 1700px;
            height: 850px;
            background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/11s.jpg') no-repeat center/cover;
            box-shadow: 3px 3px 20px #000;
            user-select: none;
            overflow: hidden;
            position: relative;
            z-index: 1;
      }

      #video-overlay {
            position: absolute;
            width: 130%;
            height: 130%;
            object-fit: cover;
            pointer-events: none;
            mix-blend-mode: screen;
            mask: linear-gradient(to top right, red 88%, transparent 0);
            -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
            z-index: 5;
            opacity: .55;
      }

      .character-container {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 10;
      }

      .character-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
      }

      .character-image.active {
            display: block;
      }

      .background-container {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 3;
      }

      .background-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            filter: blur(10px);
            transition: opacity 2s ease, filter 2s ease;
      }

      .background-slide.active {
            opacity: 1;
            filter: blur(0);
      }

      .lantern {
            position: absolute;
            opacity: 0;
            z-index: 4;
            animation: lantern-rise 8s infinite;
      }

      .lantern.position-1 { left: 20%; animation-delay: 0s; }
      .lantern.position-2 { left: 50%; transform: translateX(-50%); animation-delay: 3s; }
      .lantern.position-3 { right: 40%; animation-delay: 6s; }
      .lantern.position-4 { right: 10%; animation-delay: 1s; }
      .lantern.position-5 { right: 25%; animation-delay: 4s; }
      .lantern.position-6 { right: 18%; animation-delay: 7s; }

      @keyframes lantern-rise {
            0% { bottom: -150px; transform: scale(1); opacity: 1; }
            70% { opacity: 1; }
            100% { bottom: 850px; transform: scale(0.5); opacity: 0; }
      }
    </style>
</head>
<body>
    <div id="container">
      <div class="background-container">
            <img class="background-slide" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/11s.jpg" alt="Background 1">
            <img class="background-slide" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/22s.jpg" alt="Background 2">
            <img class="background-slide" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/33s.jpg" alt="Background 3">
            <img class="background-slide" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/44s.jpg" alt="Background 4">
            <img class="background-slide" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/55s.jpg" alt="Background 5">
      </div>

      <video id="video-overlay" src="https://img.tukuppt.com/video_show/2629112/00/02/06/5b509c34df30f.mp4" autoplay loop muted></video>

      <img class="lantern position-1" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ere.gif" alt="Lantern">
      <img class="lantern position-2" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ere.gif" alt="Lantern">
      <img class="lantern position-3" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ere.gif" alt="Lantern">
      <img class="lantern position-4" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ere.gif" alt="Lantern">
      <img class="lantern position-5" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ere.gif" alt="Lantern">
      <img class="lantern position-6" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ere.gif" alt="Lantern">

      <div class="character-container">
            <img class="character-image active" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/11s.png" alt="Character 1">
            <img class="character-image" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/22s.png" alt="Character 2">
      </div>

      <audio id="audio" src="https://mp3.joy127.com/music/12587.mp3" autoplay loop></audio>
    </div>

    <script>
      // Background slideshow
      const bgSlides = document.querySelectorAll('.background-slide');
      let bgIndex = 0;
      bgSlides.classList.add('active');

      function rotateBackgrounds() {
            bgSlides.classList.remove('active');
            bgIndex = (bgIndex + 1) % bgSlides.length;
            bgSlides.classList.add('active');
      }

      // Character toggle
      const charImages = document.querySelectorAll('.character-image');
      let charIndex = 0;

      function toggleCharacters() {
            charImages.classList.remove('active');
            charIndex = 1 - charIndex;
            charImages.classList.add('active');
      }

      // Set intervals
      setInterval(toggleCharacters, 1300);
      setInterval(rotateBackgrounds, 3000);
    </script>
</body>

云端漫步 发表于 2025-11-26 16:07:20

在我灵魂的深处，藏着一团永不熄灭的火焰，
那是对音画艺术纯粹而执着的热爱。
每当音符在耳畔流淌，色彩在眼前晕染，
我的心便如挣脱束缚的飞鸟，在自由与美好的天地间翱翔。
这份执着，并非出于功利的考量，
而是源自内心最本真的渴望 ——
将音乐与绘画所能带来的快乐，毫无保留地传递给每一个人。

绿蔷薇 发表于 2025-11-26 16:50:06

撒花花
问好漫步老师

玫の玫 发表于 2025-11-26 20:03:08

欣赏美贴，聆听佳音。制作辛苦，祝你快乐！

玫の玫 发表于 2025-11-26 20:04:49

漫步老师这个图图做得真棒，画面处理精美，意境棒棒哒，好帖狠赞！{:1_154:}

欧阳风刀 发表于 2025-11-26 21:03:08

人物扣图干净，背景清新漂亮，动画效果精彩。

欧阳风刀 发表于 2025-11-26 21:07:51

欣赏漫步兄新作。感谢分享。

绿蔷薇 发表于 2025-11-27 15:18:47

人物抠图干净，亭台背景清逸雅致，尽展古韵风彩
孔明灯次第升空，女子眼睛灵动，变色漂亮，这样动静相宜的画面很美～

绿蔷薇 发表于 2025-11-27 15:19:33

昨天占了座
今天来慢慢欣赏

绿蔷薇 发表于 2025-11-27 15:19:51

谢谢漫步老师的分享，制作辛苦~~~{:1_153:}
页: [1] 2
查看完整版本: 【漫步特效】灯火对照伶人对笑