|
<style>
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#tz {--width: 1700px; --ox: 90px; --lrc-top: calc(100% - 80px); --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; width: var(--width); height: 900px; background: url('https://642303.freep.cn/642303/tu/%E7%99%BE%E5%8F%B6%E7%AA%97%E5%A5%B3%E7%94%9F03.jpg') no-repeat center/cover; margin: 130px 0; }
#player { position: absolute; left: calc(50% - 150px); bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; transition: .8s; --opt: 1; }
#player::before, #player::after { position: absolute; content: ''; width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
#player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }
#player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
#player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px yellow); }
#vid1 {width: 100%;height: 100%; height: calc(100% + 80px); opacity: .45;z-index: 5;}
#vid2 {width: 100%;height: 110%; height: calc(100% + 80px); bottom:0px;opacity: .89; right：-220px;transform: rotateX(180deg);-webkit-mask: radial-gradient(circle, transparent,transparent,transparent,silver, lightgreen, cyan, transparent,transparent,transparent);}
</style>
<div id="tz" class="tz" data-lrc=" 夏日・纯音">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1927412897" autoplay loop></audio>
<video id="vid1" class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/78/5e611ff496acf.mp4" autoplay loop muted></video>
<video id="vid2" class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" autoplay loop muted></video>
<div id="player"></div>
</div>
<script>
var mState = () => {
player.style.setProperty('--opt', +aud.paused);
player.title = ['暂停','播放'][+aud.paused];
aud.paused ? vid1.pause() : vid1.play();
aud.paused ? vid2.pause() : vid2.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
发表于 2024-8-18 10:15
