半妖倾城

马黑黑 · 发表于 2024-5-24 07:46

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-5-24 07:52 编辑

马黑黑 · 发表于 2024-5-24 07:49

帖子代码

<style>
#papa {
position: relative;
margin: 20px 0 20px calc(50% - 720px);
width: 1280px;
height: 720px;
background: url('https://media.9game.cn/gamebase/2021/4/23/226964855.jpeg') no-repeat center/cover;
box-shadow: 2px 2px 6px #333;
overflow: hidden;
z-index: 1;
--state: running;
}
.vid {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% + 65px);
object-fit: cover;
mix-blend-mode: screen;
}
.vid:nth-of-type(2) { opacity: .5; }
.player {
position: absolute;
left: 375px;
top: 400px;
width: 120px;
height: 120px;
border-radius: 50%;
border: 6px groove tan;
border-color: black white black;
opacity: .5;
transition: 1s;
cursor: pointer;
}
.player:hover {
filter: hue-rotate(100deg) drop-shadow(0 0 30px red);
border-color: purple red plum;
}
.player::before, .player::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: radial-gradient(snow, purple, pink, lightblue, transparent);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
animation: rot 8s linear infinite var(--state);
}
.player::after { animation-delay: -1s; }
.player:nth-of-type(2) { left: 750px; top: 470px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=430787639" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/53950850/05/48/30/649e911ea2def.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" loop muted></video>
<div class="player" title="播放/暂停"></div>
<div class="player" title="播放/暂停"></div>
</div>
<script>
var players = document.querySelectorAll('.player'),
vids = document.querySelectorAll('.vid');
aud.onplaying = aud.onpause = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>