云端漫步 发表于 2025-11-14 14:32:33

【漫步特效】红楼梦散

<style>
#mydiv {
    margin: 150px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/cc4.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 20px #000;
    user-select: none;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#vid {
    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: 6;
    opacity: .45;
}
.firefly {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #7FFF00;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(127, 255, 0, 0.8);
    opacity: 0;
    z-index: 3;
    animation: glow 2s infinite alternate;
}
@keyframes glow {
    0% {
      opacity: 0.3;
      box-shadow: 0 0 4px 1px rgba(127, 255, 0, 0.5);
    }
    50% {
      opacity: 1;
      box-shadow: 0 0 10px 3px rgba(127, 255, 0, 0.9);
    }
    100% {
      opacity: 0.4;
      box-shadow: 0 0 6px 2px rgba(127, 255, 0, 0.6);
    }
}
.person-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    overflow: hidden;
}
.person-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.person-img.active {
    opacity: 1;
}
</style>

<div id="mydiv">
   <audio id="aud" src="https://ting8.yymp3.com/new18/lhwtyt/2.mp3" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/02/13/5b51adcb57103.mp4" autoplay="" loop="" muted=""></video>
   
    <div class="person-container">
      <img class="person-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/cvv1.png" alt="人物1">
      <img class="person-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/cvv2.png" alt="人物2">
      <img class="person-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/cvv3.png" alt="人物3">
      <img class="person-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/cvv4.png" alt="人物4">
      <img class="person-img" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/cvv5.png" alt="人物5">
    </div>
</div>

<script>
function createFireflies(count) {
    const container = document.getElementById('mydiv');
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
   
    for (let i = 0; i < count; i++) {
      const firefly = document.createElement('div');
      firefly.classList.add('firefly');
      container.appendChild(firefly);
       const startX = Math.random() * containerWidth;
      const startY = Math.random() * containerHeight;
      firefly.style.left = `${startX}px`;
      firefly.style.top = `${startY}px`;
      const size = 1 + Math.random() * 3;
      firefly.style.width = `${size}px`;
      firefly.style.height = `${size}px`;
      const delay = Math.random() * 5;
      firefly.style.animationDelay = `${delay}s`;
      const fireflyData = {
            x: startX,
            y: startY,
            direction: Math.random() * Math.PI * 2,
            speed: 0.5 + Math.random() * 2,
            swing: 0.02 + Math.random() * 0.05,
            swingPhase: Math.random() * Math.PI * 2,
            changeInterval: 3000 + Math.random() * 5000, // （ms）
            lastChange: Date.now()
      };
            animateFirefly(firefly, fireflyData, containerWidth, containerHeight);
    }
}
function animateFirefly(firefly, data, maxWidth, maxHeight) {
    const now = Date.now();
    const deltaTime = (now - data.lastTime) || 16; // 16ms（约60fps）
    data.lastTime = now;
      if (now - data.lastChange > data.changeInterval) {
      data.direction += (Math.random() - 0.5) * Math.PI; //
      data.lastChange = now;
      data.changeInterval = 3000 + Math.random() * 5000; //
    }
   data.swingPhase += data.swing;
    const swingOffset = Math.sin(data.swingPhase) * 0.5; //
    const currentDirection = data.direction + swingOffset;
      data.x += Math.cos(currentDirection) * data.speed * (deltaTime / 16);
    data.y += Math.sin(currentDirection) * data.speed * (deltaTime / 16);
    if (data.x < 0) data.x = maxWidth;
    if (data.x > maxWidth) data.x = 0;
    if (data.y < 0) data.y = maxHeight;
    if (data.y > maxHeight) data.y = 0;
   firefly.style.left = `${data.x}px`;
    firefly.style.top = `${data.y}px`;
    requestAnimationFrame(() => {
      animateFirefly(firefly, data, maxWidth, maxHeight);
    });
}
function startImageSlideshow() {
    const images = document.querySelectorAll('.person-img');
    let currentIndex = 0;
    images.classList.add('active');
   
    setInterval(() => {
      images.classList.remove('active');
      currentIndex = (currentIndex + 1) % images.length;
      images.classList.add('active');
    }, 3000);
}
createFireflies(150);
startImageSlideshow();
</script>

玫の玫 发表于 2025-11-14 15:40:54

沙发欣赏漫步老师新作！

玫の玫 发表于 2025-11-14 15:41:17

人物变色美美哒~

玫の玫 发表于 2025-11-14 15:42:08

她着一袭粉纱汉服，
手持折扇，
青丝长垂，
在萤火点点的背景里，
似是从红楼旧梦中走出的闺阁佳人。

玫の玫 发表于 2025-11-14 15:43:04

她指尖的折扇、
案头的诗笺，
是红楼女儿的才情写照，
更是在梦幻与现实间，
关于 “经典不朽” 的温柔注脚。

欧阳风刀 发表于 2025-11-14 21:17:47

精彩的变色特效，画面漂亮，意境唯美。

欧阳风刀 发表于 2025-11-14 21:18:07

感谢漫步兄分享！

圊圊淥詶 发表于 2025-11-15 11:57:44

来欣赏漫步老师的精美特效~~

圊圊淥詶 发表于 2025-11-15 11:58:12

精彩的变色，意境也不错，欣赏中~~

圊圊淥詶 发表于 2025-11-15 11:58:39

问好漫步老师，周末快乐~~
页: [1] 2
查看完整版本: 【漫步特效】红楼梦散