亚伦影音工作室 发表于 2024-10-11 21:42

《曲中人Dj》_安儿陈

本帖最后由 亚伦影音工作室 于 2024-10-11 21:42 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(0% - 90px); width: 980px; height: 600px; background:#006400 url('https://') no-repeat center/cover; box-shadow: 0px 0px 0px #00ff00; position: relative; z-index: 1; display: grid; overflow: hidden; place-items: center;}
#rpics{width:980px;overflow:hidden;postion:absolute;margin-top:5300px; animation:mUp 120s infinite linear;}
.nbpic{height:2000px;-webkit-mask-image: radial-gradient(black 25% ,transparent 75%);}
@keyframes mUp { 50%{ margin-top: -9700px; } }

#player {width: 160px;
        height: 150px;
        position: absolute;
        bottom: 16%;
        left:3%;
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot {
        to { transform: rotate(360deg); filter: hue-rotate(360deg); }
}
#fullscreen { position: absolute; bottom:30px; left:90%;font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>

<div id="papa">
<div id='rpics'>
<div class='nbpic' style="background:url(https://pic.imgdb.cn/item/65093817204c2e34d3def680.jpg);background-size: 100% 100%;" ></div>
<div class='nbpic' style="background:url(https://pic.imgdb.cn/item/65093817204c2e34d3def66a.jpg);background-size: 100% 100%;" ></div>
<div class='nbpic' style="background:url(https://pic.imgdb.cn/item/65093816204c2e34d3def64a.jpg);background-size: 100% 100%;" ></div>
<div class='nbpic' style="background:url(https://pic.imgdb.cn/item/67091f86d29ded1a8cd341cf.jpg);background-size: 100% 100%;" ></div>
<div class='nbpic' style="background:url(https://pic.imgdb.cn/item/67091935d29ded1a8cce7620.jpg);background-size: 100% 100%;" ></div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/5a51-audiofreehighqps/8E/2D/GAqhav0KyhxQACAAAAMViJHD.m4a" autoplay loop></audio>
<img id="player" src="https://pic.imgdb.cn/item/661b0afd68eb935713287d17.png" atl="" title="play" />
<span id="fullscreen">全屏</span>
</div>
<script>
mState = () => {
        papa.style.setProperty('--state',aud.paused ? 'paused' : 'running');
        player.title = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
rpics.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>rpics.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>rpics.style.animationPlayState = 'paused');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出',papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>

红影 发表于 2024-10-11 22:04

漂亮的图片轮播效果，这首歌也特别喜欢呢，还有花潮图标的小播，都很喜欢。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-10-11 22:06

这些图图还能倒着变化呢，都是能文会写的才女啊{:4_187:}

梦油 发表于 2024-10-12 09:10

用“花潮论坛”做播放器很别致。{:5_116:}

小辣椒 发表于 2024-10-12 13:36

欣赏亚伦精彩制作{:4_187:}

老谟深虑 发表于 2024-10-12 17:02

         欣赏老师的精彩制作，点赞！
页: [1]
查看完整版本: 《曲中人Dj》_安儿陈