本帖最后由 花简静 于 2024-8-18 15:47 编辑
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/66be0af7d9c307b7e9a9f59e.webp') no-repeat center/cover;
box-shadow: 3px 3px 8px gray;
overflow: hidden;
position: relative;
}
#mydiv::before {
position:absolute;
content: '';
inset: 0;
background: url('https://pic.imgdb.cn/item/66be0af7d9c307b7e9a9f59e.webp') no-repeat center/cover;
-webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
transition: 8s;
--size: 32px;
}
#mydiv:hover::before { --size: 2px; transform: scale(110%) rotate(0deg); -webkit-mask: radial-gradient(circle, silver, lightgreen, cyan, transparent,transparent);}
#player {
--inset: gray;
position: absolute;
left: calc(50% - 350px);
bottom: 300px;
width:80px;
height: 80px;
opacity: .49;
filter: invert(.45);
background: url('https://pic.imgdb.cn/item/65c0a8f19f345e8d03032e45.png') no-repeat center/cover;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
}
#vid {
position: absolute;
width: 100%;
height:160%;
object-fit: cover;
opacity: .49;
top:0px;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to bottom, red 58%, transparent 63.5%, transparent 0);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/02/34/5b56b9d9dfec9.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5255640" autoplay loop></audio>
<div id="player" title="播放/暂停"></div>
</div>
<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => player.style.setProperty('--state', aud.paused ? 'paused'span>: 'running');
player.onclick = () =>aud.paused ? aud.play() : aud.pause()
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
| 
发表于 2024-8-18 10:14
