论坛 › 欢乐水吧 › 程颢书院之夜

杨帆 发表于 2025-5-9 20:22

程颢书院之夜

本帖最后由 杨帆 于 2025-5-10 20:16 编辑 <br /><br /><style>
:root {--w:1280px;--h:750px;}
#oBlk {
    --state: running;
    margin-left: 39.5% ;
    left:calc(-0.5 * var(--w));
    margin-top:90px;
    width: var(--w);
    height: var(--h);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,.65);
    z-index: 1;
    position: relative;
}
#oBlk::before,#oBlk::after {
    position: absolute;
    content: '';
    left: var(--curX0);
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('https://cccimg.com/view.php/654ef1ec9d3b07bd438ed4d83b3ef41b.jpg') no-repeat center / cover;
}
#oBlk::after {
    left: var(--curX1);
    transform: scaleX(-1);
}
   #comp {height:calc(var(--h) + 100px);}
   #player { position: absolute;left: 2%;top: 3%; width: 8%; cursor: pointer; opacity: 0.5; transition: width .75s; z-index: 9; animation: rot 10s linear infinite var(--state); }
    #player:hover { opacity: .8; width: 10%; filter: drop-shadow(0 0 30px gold); }
    #plane {position: absolute;left: 60px;top: 0;width: 100px;offset-distance: 0;mix-blend-mode: unset; offset-path: path("M0 50 Q400 160, 1800 450 T1300 100");animation: move 28s linear infinite var(--state);}
#dt{
      position:absolute;
      width: 100%;
      height: 80%;
      top:0%;
      left: 0%;
      mix-blend-mode: screen;
      z-index: 1;
}
#dt img{width: 100%;
      height: 100%;
    }
#vid1{
        width: 100%;
        height: 35%;
        z-index: 1;
        position:absolute;
        top:-10px;
        left:180px;
      opacity: .88;
        object-fit: cover;
      mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
        pointer-events: none;
      transform:rotate(0deg)scale(1);
      -webkit-mask: linear-gradient(red, transparent);
}
#vid2{
        width: 150%;
        height: 45%;
        z-index: 1;
        position:absolute;
        top:75%;
        left:-25%;
      opacity: .98;
        object-fit: cover;
      mix-blend-mode: screen;
        -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
        pointer-events: none;
      transform:rotate(0deg)scale(1);
}
#vid3{
        width: 100%;
        height: 100%;
        z-index: 1;
        position:absolute;
        top:0%;
        left:0%;
      opacity: .99;
        object-fit: cover;
      -webkit-mask: radial-gradient(transparent 20%, red);   
      mix-blend-mode:screen;
        pointer-events: none;
      transform:rotate(0deg)scale(1);
}
       @keyframes rot { to { transform: rotate(1turn); } }
       @keyframes move { to { offset-distance: 100%;}
       @keyframes move1 {
0% { left:1500px; }
100% {left: -10px; }
}
</style>
<div id="oBlk" >

<div id="comp"></div>
      <img id="plane" src="https://cccimg.com/view.php/251b600ffe50d4622824bf9bf1c97cba.jpg" style="mix-blend-mode: screen;"   alt="" / >
        <audio id="aud" src="https://cccimg.com/view.php/9c9a552ac61bb428c9fdb2d5407f8aba.mp3" autoplay loop></audio>
        <img id="player" src="https://pic.imgdb.cn/item/65673f07c458853aef1e25ba.png" alt="" />
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="IMG" /style="mix-blend-mode: screen "></div>
<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/12/79/V-127936-7871EE24.mp4" loop muted autoplay=""></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c05d86785e.mp4" autoplay loop muted></video>
<video id="vid3" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/22/02/video64edb8ba412ef.mp4" autoplay loop muted></video></div>
<script>

oBlk.onclick = () => {
        aud.paused ? (aud.play(),vid1.play(),vid2.play(),vid3.play()): (aud.pause(),vid1.pause(),vid2.pause(),vid3.pause());
        oBlk.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
(function() {
      var mState = () => {
      
IMG.style.setProperty('opacity', aud.paused ? '0' : '.9');
      };
   aud.oncanplay =aud.onplaying = aud.onpause = () => mState();
      })();   


{
let blkWidth=oBlk.offsetWidth;
let step=2,tune=0,curX0=0,curX1=blkWidth,raf;
let moving=function(){
curX0-=step;
curX1-=step;
if(curX0<=-blkWidth)curX0=blkWidth;
if(curX1<=-blkWidth)curX1=blkWidth;
tune=curX1+(curX0>=0?1:-1);
oBlk.style.setProperty('--curX0',curX0+'px');
oBlk.style.setProperty('--curX1',tune+'px');
raf=requestAnimationFrame(moving)
};

moving();
      let isPaused = false;
      player.addEventListener('click', () => {
            isPaused = !isPaused;
            if (isPaused) {
                cancelAnimationFrame(raf);
                player.value = '移动';
            } else {
                moving();
                player.value = '暂停';
            }
      });
}
document.addEventListener('DOMContentLoaded', function() {
    var imgs = document.querySelectorAll('img');
    imgs.forEach(function(img) {
      img.addEventListener('error', function() {
            this.parentNode.removeChild(this);
            
      });
    });
});
</script>

红影 发表于 2025-5-9 20:42

很热闹的晚会。欣赏杨帆好帖{:4_187:}

红影 发表于 2025-5-9 20:44

这滚动图是图片翻转衔接的吧，反的那张文字也反了呢{:4_173:}
好像播放器按钮点击无用？

杨帆 发表于 2025-5-9 20:47

本帖最后由 杨帆 于 2025-5-9 21:10 编辑

红影 发表于 2025-5-9 20:44
这滚动图是图片翻转衔接的吧，反的那张文字也反了呢
好像播放器按钮点击无用？
是，本地预览正常呀。现在去掉粒子显示正常了

小辣椒 发表于 2025-5-9 21:45

图片翻转，用文字就会出现反的文字

小辣椒 发表于 2025-5-9 21:48

杨帆做帖，添加效果要看场景，现在这个场景我感觉我那个天空运用的飞船这里不怎么合适

小辣椒 发表于 2025-5-9 21:48

歌曲加的好听，欣赏杨帆精彩的制作

红影 发表于 2025-5-9 21:49

杨帆 发表于 2025-5-9 20:47
是，本地预览正常呀。现在去掉粒子显示正常了

嗯嗯，点击可以暂停了，但图片滚动还没暂停{:4_173:}

杨帆 发表于 2025-5-10 00:19

小辣椒 发表于 2025-5-9 21:48
杨帆做帖，添加效果要看场景，现在这个场景我感觉我那个天空运用的飞船这里不怎么合适

有道理，已更换，谢谢小辣椒{:4_187:}

杨帆 发表于 2025-5-10 00:20

红影 发表于 2025-5-9 21:49
嗯嗯，点击可以暂停了，但图片滚动还没暂停

这个图片滚动是JS动画，暂停需添加按钮呢

红影 发表于 2025-5-10 10:41

杨帆 发表于 2025-5-10 00:20
这个图片滚动是JS动画，暂停需添加按钮呢

哦，还以为是CSS里设置的。不用加按钮吧，只要加命令就行了啊。{:4_173:}

杨帆 发表于 2025-5-10 20:21

红影 发表于 2025-5-10 10:41
哦，还以为是CSS里设置的。不用加按钮吧，只要加命令就行了啊。

经尝试，可以一并控制{:4_187:}

小辣椒 发表于 2025-5-10 21:03

杨帆 发表于 2025-5-10 00:19
有道理，已更换，谢谢小辣椒

不客气哦，现在挺好的

红影 发表于 2025-5-10 23:11

杨帆 发表于 2025-5-10 20:21
经尝试，可以一并控制

看到了，杨帆辛苦，改得很好了{:4_187:}

杨帆 发表于 2025-5-10 23:33

红影 发表于 2025-5-10 23:11
看到了，杨帆辛苦，改得很好了

谢谢影子鼓励，祝愉快天天{:4_187:}

红影 发表于 2025-5-11 15:15

杨帆 发表于 2025-5-10 23:33
谢谢影子鼓励，祝愉快天天

不客气啊，问好杨帆{:4_187:}

杨帆 发表于 2025-5-11 15:37

红影 发表于 2025-5-11 15:15
不客气啊，问好杨帆

问好影子，祝节日快乐{:4_204:}

红影 发表于 2025-5-11 16:00

杨帆 发表于 2025-5-11 15:37
问好影子，祝节日快乐

问好杨帆，也祝福您的家人节日快乐{:4_187:}

查看完整版本: 程颢书院之夜