杨帆 发表于 2024-11-12 22:28

境 - 拼音师BGM

<style type="text/css">
#papa{
    margin: 130px 0 30px calc(50% - 730px);
        width: 1286px;
        height: 720px;
        background:#833;
        pointer-events: none;
        overflow: hidden;
        position: relative;
        border: 1px solid rgba(36, 201, 219,.95);
    border-radius: 2px;       
}
#btnFs {
        position: absolute;
        right:15px;
        bottom:15px;
        padding: 6px;
        background: green;
        color: white;
        border: 2px solid white;
        border-radius: 8px;
        cursor: pointer;
        pointer-events: auto;
        z-index: 11;
}
#mdiv{top:20px; left:20px;cursor: pointer;pointer-events: auto;
        width:98px;height:105px;text-align:center;animation:rot 10s linear infinite;
        position: absolute;filter:drop-shadow(#000 0px 0 1px);
        z-index: 10;
        }
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}
#vid1{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
.vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;
opacity: 0;object-fit: cover; pointer-events: none;
animation: round 50s linear infinite;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
10% {
opacity: 1;}
23% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 40s;}
.vid:nth-child(2){animation-delay: 30s;}
.vid:nth-child(3){animation-delay: 20s;}
.vid:nth-child(4) {animation-delay: 10s;}
.vid:nth-child(5) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5){animation-play-state: paused;}
</style >
<div id="papa" >
<img id="mdiv" alt="" src="https://pic.imgdb.cn/item/67335150d29ded1a8c961005.png" title="播放/暂停" />
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/d038ac1007f2d25b46b8452f25a0d119_preview.mp4" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e51180a3f5a8bb36831a87d9ae331269_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/7abe3fd5095bc1027d571313853692c0.mp4
" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d646b3534d7e0d64f4540be44ba9c145_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/ac37589f7f2dad8ba2b0d6d9511e775a_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/bcee4e9355a42b09eeffd2b277cf2024_preview.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/12/ce/69/dc048522041006abd3c1b5e250479ee1/audio.mp3" autoplay loop></audio>
<span id="btnFs"></span>
</div>
<script type="module">
        import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        qp.fs('papa','btnFs');
</script>
<script>
(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
      };
      aud.onplaying = aud.onpause = () => mState();
      })();
mdiv.onclick = () => aud.paused ? (aud.play(),vid1.play() ): (aud.pause(),vid1.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.ddEventListener('pause', () => mState());
</script>


红影 发表于 2024-11-12 23:03

这视频轮播效果漂亮。
欣赏杨帆老师好帖{:4_199:}

起个网名好难 发表于 2024-11-13 06:21

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

愤怒的葡萄 发表于 2024-11-13 07:15

挺漂亮的，楼主好厉害。

醉美水芙蓉 发表于 2024-11-13 07:20

梦油 发表于 2024-11-13 09:59

太美了，太美了，我给一个大大的赞。

杨帆 发表于 2024-11-13 11:49

红影 发表于 2024-11-12 23:03
这视频轮播效果漂亮。
欣赏杨帆老师好帖

谢谢红影管理员支持与鼓励，祝福开心每一天{:4_204:}

杨帆 发表于 2024-11-13 11:50

起个网名好难 发表于 2024-11-13 06:21


谢谢起个网名好难友友支持与鼓励{:4_191:}

杨帆 发表于 2024-11-13 11:51

愤怒的葡萄 发表于 2024-11-13 07:15
挺漂亮的，楼主好厉害。

谢谢愤怒的葡萄友友支持与鼓励，祝开心{:4_204:}

杨帆 发表于 2024-11-13 11:55

醉美水芙蓉 发表于 2024-11-13 07:20
欣赏扬帆友友的精彩！

问好醉美老师，谢谢鼓励、指导与帮助，祝福开心每一天{:4_204:}

杨帆 发表于 2024-11-13 11:57

梦油 发表于 2024-11-13 09:59
太美了，太美了，我给一个大大的赞。

谢谢梦油超版鼓励与支持，祝开心{:4_190:}

梦油 发表于 2024-11-13 17:11

杨帆 发表于 2024-11-13 11:57
谢谢梦油超版鼓励与支持，祝开心

杨帆朋友别客气。

红影 发表于 2024-11-13 20:39

杨帆 发表于 2024-11-13 11:49
谢谢红影管理员支持与鼓励，祝福开心每一天

不客气啊，叫我影子就好{:4_187:}

杨帆 发表于 2024-11-13 23:49

红影 发表于 2024-11-13 20:39
不客气啊，叫我影子就好

好的，谢谢影子，祝开心{:4_204:}

红影 发表于 2024-11-15 16:00

杨帆 发表于 2024-11-13 23:49
好的，谢谢影子，祝开心

谢谢杨帆的美好祝福，周末愉快{:4_187:}

杨帆 发表于 2024-11-15 17:06

红影 发表于 2024-11-15 16:00
谢谢杨帆的美好祝福，周末愉快

周末愉快，谢谢影子{:4_204:}

绿叶清舟 发表于 2024-11-15 19:30

都是高清图片啊，漂亮的画面，欣赏杨帆好贴

红影 发表于 2024-11-15 21:27

杨帆 发表于 2024-11-15 17:06
周末愉快，谢谢影子

不用谢来谢去呢，大家一起，快乐就好{:4_187:}

杨帆 发表于 2024-11-16 11:28

绿叶清舟 发表于 2024-11-15 19:30
都是高清图片啊，漂亮的画面，欣赏杨帆好贴

谢谢绿叶清舟版主支持与鼓励，祝开心{:4_204:}

绿叶清舟 发表于 2024-11-16 21:10

杨帆 发表于 2024-11-16 11:28
谢谢绿叶清舟版主支持与鼓励，祝开心

杨帆客气了，一起开心
页: [1]
查看完整版本: 境 - 拼音师BGM