向荣春 发表于 2025-8-28 18:19

【向荣音画】一路繁华相送（七夕节快乐）


<style>
    @import 'https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/2/tz01.css';
    #pa {
      --offsetX: 0px;
      width: clamp(600px, 120vw, 1700px); /* 适配论坛 */
      height: auto;
      aspect-ratio: 18/9;
      margin: 50px 0 50px calc(40% - 530px); /* 定位方式 */
      top: 130px; /* 一致的顶值 */
      position: relative;
      --bg: url('https://image.hnol.net/c/2025-08/24/16/202508241636495991-5083785.jpg') no-repeat center/cover;
      --bg1: url('https://image.hnol.net/c/2025-08/24/16/202508241636173411-5083785.jpg') no-repeat center/cover;
      --state: running;
      transition: all 4s cubic-bezier(0.25, 0.1, 0.25, 1);
      --ma-size: 12%;
      --per: 0%;
      --a: 135deg;
      overflow: hidden;
      will-change: transform;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      z-index: 1; /* 元素覆盖 */
    }
    #pa::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg1);
      mask: linear-gradient(var(--a),
                            rgba(0,0,0,1) 0%,
                            rgba(0,0,0,0.8) 20%,
                            rgba(0,0,0,0.5) 50%,
                            rgba(0,0,0,0.2) 80%,
                            transparent 100%);
      z-index: 40;
      will-change: mask-position;
      transition: mask-position 0.1s linear;
    }
    .qk-vid {
      mix-blend-mode: screen;
      opacity: .6;
      transition: opacity 4s cubic-bezier(0.25, 0.1, 0.25, 1);
      will-change: opacity;
      position: absolute;
      top: 0;
      left: 0;
      width: 110%;
      height: 110%;
      object-fit: cover;
      transform: translate(-5%, -5%);
      z-index: 50;
    }
   
    .loading-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s ease-in-out infinite;
      z-index: 200;
      display: none;
    }
   
    @keyframes spin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
   
    @keyframes curtainOpenLeft {
      0% { width: 100%; transform: translateX(0); opacity: 1; }
      30% { width: 70%; transform: translateX(-15%); opacity: 1; }
      70% { width: 30%; transform: translateX(-35%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(-100%); opacity: 0; }
    }
   
    @keyframes curtainOpenRight {
      0% { width: 100%; transform: translateX(0); opacity: 1; }
      30% { width: 70%; transform: translateX(15%); opacity: 1; }
      70% { width: 30%; transform: translateX(35%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0; }
    }
   
    .curtain-transition {
      position: absolute;
      height: 100%;
      top: 0;
      background-size: cover;
      background-position: center;
      z-index: 50;
      will-change: width, transform, opacity;
      backface-visibility: hidden;
    }
   
    .curtain-left {
      left: 0;
      animation: curtainOpenLeft 12s forwards cubic-bezier(0.25, 0.1, 0.25, 1);
    }
   
    .curtain-right {
      right: 0;
      animation: curtainOpenRight 12s forwards cubic-bezier(0.25, 0.1, 0.25, 1);
    }
</style>

<div id="pa">
    <div class="loading-indicator"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1473782328&.mp3" loop autoplay></audio>
    <video class="qk-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
</div>

<script type="module">
    var per = 0,
      step = 0.008,
      aniCounter = 0,
      raf,
      baseInterval = 24000,
      interval = baseInterval,
      isPlaying = true,
      isAudioPlaying = true,
      animationTimeout;
   
    var pics = [
         'https://image.hnol.net/c/2025-08/24/16/202508241636173411-5083785.jpg',
      'https://image.hnol.net/c/2025-08/24/16/202508241636349341-5083785.jpg',
      'https://image.hnol.net/c/2025-08/24/16/202508241636495991-5083785.jpg',
      'https://image.hnol.net/c/2025-08/24/16/202508241636173411-5083785.jpg',

    ];
   
    // 获取DOM元素
    const loadingIndicator = document.querySelector('.loading-indicator');
    const audioElement = document.getElementById('aud');
    const pa = document.getElementById('pa');
   
    // 音频控制函数
    function toggleAudio() {
      if (audioElement.paused) {
            audioElement.play().then(() => {
                isAudioPlaying = true;
            }).catch(e => {
                console.log('播放:', e);
            });
      } else {
            audioElement.pause();
            isAudioPlaying = false;
      }
    }
   
    // 页面交互触发自动播放
    function handleInteraction() {
      if (!isAudioPlaying) {
            audioElement.play().then(() => {
                isAudioPlaying = true;
            }).catch(e => {
                console.log('交互触发播放:', e);
            });
      }
      document.removeEventListener('click', handleInteraction);
      document.removeEventListener('touchstart', handleInteraction);
    }
   
    function preloadImages() {
      loadingIndicator.style.display = 'block';
      let loadedCount = 0;
      
      pics.forEach(src => {
            const img = new Image();
            img.src = src;
            img.onload = img.onerror = () => {
                loadedCount++;
                if (loadedCount === pics.length) {
                  loadingIndicator.style.display = 'none';
                }
            };
      });
    }
   
    let animationStartTime;
    function startAnimationLoop() {
      if (isPlaying) {
            clearTimeout(animationTimeout);
            animationStartTime = Date.now();
            
            animationTimeout = setTimeout(() => {
                changeToNextPic();
            }, interval);
      }
    }
   
    function changeToNextPic() {
      loadingIndicator.style.display = 'block';
      aniCounter = (aniCounter + 1) % pics.length;
      updateCurtainAndBackground(() => {
            loadingIndicator.style.display = 'none';
      });
    }
   
    function updateCurtainAndBackground(callback) {
      const picIdx = aniCounter % pics.length;
      
      document.querySelectorAll('.curtain-transition').forEach(el => el.remove());
      
      const leftCurtain = document.createElement('div');
      leftCurtain.className = 'curtain-transition curtain-left';
      leftCurtain.style.backgroundImage = `url(${pics})`;
      pa.appendChild(leftCurtain);
      
      const rightCurtain = document.createElement('div');
      rightCurtain.className = 'curtain-transition curtain-right';
      rightCurtain.style.backgroundImage = `url(${pics})`;
      pa.appendChild(rightCurtain);
      
      const img = new Image();
      img.src = pics;
      img.onload = img.onerror = callback;
      
      setTimeout(() => {
            pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
      }, 2000);
      
      const video = document.querySelector('.qk-vid');
      video.style.opacity = '0.3';
      setTimeout(() => {
            video.style.opacity = '0.6';
      }, 2000);
      
      cancelAnimationFrame(raf);
      per = 0;
      changePic();
      
      if (isPlaying) {
            startAnimationLoop();
      }
    }
   
    function changePic() {
      if (per > 100) {
            per = 0;
      } else if (isPlaying) {
            per += step;
            document.documentElement.style.setProperty('--per', per + '%');
            raf = requestAnimationFrame(changePic);
      }
    }
   
    // 绑定交互事件
    document.addEventListener('click', handleInteraction);
    document.addEventListener('touchstart', handleInteraction);
    document.addEventListener('keydown', (e) => {
      if (e.key.toLowerCase() === 'm') {
            toggleAudio();
            e.preventDefault();
      }
    });
   
    // 初始化
    preloadImages();
    startAnimationLoop();
    changePic();
   
    // 尝试自动播放音乐
    window.addEventListener('load', () => {
      if (audioElement.paused) {
            audioElement.play().then(() => {
                isAudioPlaying = true;
            }).catch(e => {
                console.log('等待用户交互:', e);
            });
      }
    });
</script>
<BR><BR><BR><BR><BR><BR>

瞳萤 发表于 2025-8-28 21:21

温馨浪漫，七夕快乐

游侠 发表于 2025-8-29 07:23

欣赏佳作 七夕快乐

蜻蜓 发表于 2025-8-29 09:50

为何我只看到FLASH,却看不到图{:9008:}

蜻蜓 发表于 2025-8-29 09:51

祝向荣老师七夕快乐{:10_402:}

蜻蜓 发表于 2025-8-29 09:52

终于看到了，很是浪漫{:10_402:}

倒立的土豆 发表于 2025-8-29 15:58

非常漂亮的音画作品，挺浪漫的。

向荣春 发表于 2025-8-29 19:13

蜻蜓 发表于 2025-8-29 09:50
为何我只看到FLASH,却看不到图








极速模式{:10_403:} 七夕快乐

蜻蜓 发表于 2025-8-30 09:27

很是漂亮{:10_402:}
页: [1]
查看完整版本: 【向荣音画】一路繁华相送（七夕节快乐）