网站首页 › ┫特效音画┣ › 【漫步特效】秋窗风雨夕《两个视频＋扣人物叠加》

云端漫步 发表于 2025-11-9 22:45:23

【漫步特效】秋窗风雨夕《两个视频＋扣人物叠加》

<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 980px);
    display: grid;
    place-items: center;
    width: 1800px;
    height: 900px;
    background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/hhb.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: 100%;
    height: 100%;
    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: 2;
    opacity: .75;
}
#vid2 {
    position: absolute;
    width: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 3;
    opacity: 0.8;
}
#fish {
    position: absolute;
    right: 150px;
    bottom: 150px;
    width: 180px;
    height: 120px;
    z-index: 4;
}
#fish2 {
    position: absolute;
    left: 60%;
    top: 65%;
    width: 200px;
    height: 140px;
    z-index: 4;
    transform: scaleX(-1);
}
#fish3 {
    position: absolute;
    right: 35%;
    bottom: 40%;
    width: 160px;
    height: 110px;
    z-index: 4;
}
.fish-school {
    position: absolute;
    z-index: 4;
}
#character {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
}
</style>
<div id="mydiv">
    <audio id="aud" src="https://mp3.joy127.com/music/12604.mp3" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay="" loop="" muted=""></video>
    <video id="vid2" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8aff3ce01.mp4" autoplay="" loop="" muted=""></video>
    <!-- 鱼图片元素 -->
    <img id="fish" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <img id="fish2" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <img id="fish3" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <!-- 鱼群元素 -->
    <img class="fish-school" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <img class="fish-school" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <img class="fish-school" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <img class="fish-school" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">
    <img class="fish-school" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/6/5/ee.gif" alt="鱼">

    <img id="character" src="https://webftp-bbs.hnol.net/ggkj2017//yunduanmanbu/16/6/5/hhg.png" alt="人物">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fishSchool = document.querySelectorAll('.fish-school');
    const container = document.getElementById('mydiv');
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    fishSchool.forEach((fish, index) => {
      //(50-120px)
      const size = 50 + Math.random() * 70;
      fish.style.width = `${size}px`;
      fish.style.height = `${size * 0.67}px`;
      const startX = containerWidth - 300 + Math.random() * 200;
      const startY = containerHeight - 300 + Math.random() * 150;
      fish.style.left = `${startX}px`;
      fish.style.top = `${startY}px`;
         if (Math.random() > 0.7) {
            fish.style.transform = 'scaleX(-1)';
      }
      function animateFish() {
            const targetX = containerWidth * 0.3 + Math.random() * containerWidth * 0.4;
            const targetY = containerHeight * 0.3 + Math.random() * containerHeight * 0.4;
            const duration = 15000 + Math.random() * 20000; // 15-35秒
            const startTime = performance.now();
            function move(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1);
                const easeProgress = 1 - Math.pow(1 - progress, 3);
               const currentX = startX + (targetX - startX) * easeProgress;
                const currentY = startY + (targetY - startY) * easeProgress;
               fish.style.left = `${currentX}px`;
                fish.style.top = `${currentY}px`;
                if (progress < 1) {
                  requestAnimationFrame(move);
                } else {
                  setTimeout(animateFish, 2000 + Math.random() * 3000);
                }
            }            requestAnimationFrame(move);
      }
      setTimeout(animateFish, index * 1000);
    });
});
</script>

圊圊淥詶 发表于 2025-11-10 09:28:16

非常好看的古风特效，各种元素点缀的都很丰富，欣赏漫步老师精美特效~~

圊圊淥詶 发表于 2025-11-10 09:28:29

谢谢漫步老师分享，辛苦了~~

玫の玫 发表于 2025-11-10 11:23:19

大鱼小鱼好多鱼。。。。。。。

玫の玫 发表于 2025-11-10 11:23:43

欣赏漫步老师新作，
画面以黑色为背景，
搭配红色汉服与金色锦鲤，
营造出 “秋窗风雨夕” 的古典诗意且略带凄清的氛围。

玫の玫 发表于 2025-11-10 11:24:01

女子手持红伞，
姿态优雅，
尽显古典仕女的风韵。
金色锦鲤与绿色落叶的点缀，
为画面添了几分灵动与秋意的萧瑟。

玫の玫 发表于 2025-11-10 11:24:17

整体画面将古典汉服、
锦鲤元素与秋日诗句融合，
宛如一幅描绘秋窗风雨的古典画卷。

绿蔷薇 发表于 2025-11-10 14:38:47

抠图干净无瑕疵
江南风光为背景
鱼儿穿梭嬉戏中
色彩搭配恰到好处
画面美得让人赏心悦目

绿蔷薇 发表于 2025-11-10 14:40:01

做这样的作品很费功夫的，漫步老师辛苦了~~~

绿蔷薇 发表于 2025-11-10 14:40:26

问好漫步老师，遥祝初冬安暖~~~

查看完整版本: 【漫步特效】秋窗风雨夕《两个视频＋扣人物叠加》