论坛首页 › 特效动画 › 【漫步特效】光的私语

醉美水芙蓉 发表于 3 天前

【漫步特效】光的私语

<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/155057i1hd7zajh3adhaaj.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.joy127.com/music/12592.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>

查看完整版本: 【漫步特效】光的私语