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

【漫步特效】光的私语

<style>
#mydiv {
    margin: 130px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1700px;
    height: 850px;
    background: lightblue url('https://kkshan.com/data/attachment/forum/202510/21/223702knpaa227093on9zb.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: 2;
    opacity: .35;
}

.person-img {
    position: absolute;
    width: 1700px;
    height: 850px;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
}

@keyframes fadeLoop {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.person1 {
    animation: fadeLoop 3s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}
.person2 {
    animation: fadeLoop 3s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s;
}
.person3 {
    animation: fadeLoop 3s infinite cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s;
}
#snake-btn {
    position: absolute;
    right: 1000px;
    top: 30%;
    transform: translateY(-50%);
    z-index: 9999;
    cursor: pointer;



}

#snake-lantern {
    width: 120px;
    height: auto;
    transition: all 0.3s ease;
}

#snake-btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}
#snake-btn:hover #snake-lantern {
    transform: scale(1.1);
}

#snake-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
    background: rgba(255, 100, 0, 0.7);
}
</style>

<div id="mydiv">
    <audio id="aud" src="https://mp3_proxy.jstools.net/mp3_uploads/public/202510/21/20251021160207_68f73dff799f5.mp3" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/29/69/62a4720b6a6ca.mp4" autoplay loop muted></video>

    <img class="person-img person1" src="https://kkshan.com/data/attachment/forum/202510/21/155043az7r2gfrygro6r6r.png" alt="人物1">
    <img class="person-img person2" src="https://kkshan.com/data/attachment/forum/202510/21/155043ay6y9wjla42v99u6.png" alt="人物2">
    <img class="person-img person3" src="https://kkshan.com/data/attachment/forum/202510/21/155044nrq4zgz25xeqg4t0.png" alt="人物3">

    <div id="snake-btn">

      <img id="snake-lantern"
             src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/88a.gif"
             alt="蛇灯笼播放暂停按钮">

      <div id="snake-fallback"></div>
    </div>
</div>

<script>

const snakeBtn = document.getElementById('snake-btn');
const snakeLantern = document.getElementById('snake-lantern');
const fallback = document.getElementById('snake-fallback');
const audio = document.getElementById('aud');
const video = document.getElementById('vid');

snakeLantern.addEventListener('error', function() {

    snakeLantern.style.display = 'none';
    fallback.style.display = 'flex';
});

snakeBtn.addEventListener('click', function() {
    if (audio.paused) {

      audio.play().catch(e => console.log(':', e));
      video.play().catch(e => console.log(':', e));
      snakeBtn.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.8)';
    } else {

      audio.pause();
      video.pause();
      snakeBtn.style.boxShadow = '0 0 20px rgba(255, 215, 0, 0.8)';
    }
});
</script>

圊圊淥詶 发表于 2025-11-10 09:20:48

问好漫步老师，欣赏美图，
这个同素挺好看的，~~

圊圊淥詶 发表于 2025-11-10 09:21:42

谢谢漫步老师的特效制作，辛苦了，新周快乐~~{:1_155:}

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

欣赏漫步老师精美制作~~

玫の玫 发表于 2025-11-10 11:26:36

画面以红色幕布为底色，
暖黄光影交织，
营造出梦幻且温暖的 “光的私语” 氛围。

玫の玫 发表于 2025-11-10 11:26:58

背景中复古花瓶、
红色灯笼点缀其间，
与暖光相融，
增添了雅致的复古韵味。

景明 发表于 2025-11-10 13:54:00

挺漂亮的，温暖感觉。

绿蔷薇 发表于 2025-11-10 14:28:25

这个素与我们的本周同图的素一样的呢~~{:4_123:}

绿蔷薇 发表于 2025-11-10 14:30:29

小光球比喻成一小团焐热的月光，绝了，妙~~~

绿蔷薇 发表于 2025-11-10 14:34:09

舞台风背景的，暖色调铺陈出基调
人物与景致浑然一体，毫无违和感
变色的光球，柔光映染画面，真美
页: [1] 2
查看完整版本: 【漫步特效】光的私语