本帖最后由 花简静 于 2024-12-22 22:00 编辑
<style>
#mama {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20241007rgjiuq03.webp') no-repeat center/cover;
border-radius: 6px;
box-shadow: 3px 3px 8px gray;
position: relative;
overflow: hidden;
}
#vid {
position: absolute;
width: 110%;
height: 110%;
object-fit: cover;
left:-6%;
top:-4%;
mix-blend-mode:soft-light;
pointer-events: none;
opacity: 0.69;
-webkit-mask: linear-gradient(to bottom,transparent,red);
}
#bsvg {
position: absolute;
border-radius: 2px;
transform: rotateY(180deg);
}
#player {
--deg: 4turn;
cursor: pointer;
transform-origin: 512px 400px;
animation: rot 10s linear infinite alternate var(--state);
}
#player:hover {
--deg: 2turn;
}
.linepath {
stroke-dasharray: 1664;
animation: draw 10s linear infinite alternate var(--state);
}
@keyframes draw {
from { stroke-dashoffset: 1664; }
to { stroke-dashoffset: 0; }
}
@keyframes erase {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 1664; }
}
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>
<div id="mama">
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/19/11/25/15/18/39/video5ddb804f867a1.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2609985244" autoplay loop></audio>
<svg id="bsvg" width="100%" height="100%" fill="none" stroke="rgba(194,158,142,.65)" stroke-width="10" stroke-lineCap="round">
<defs>
<g id="cpath" fill="rgba(217,193,182,.25)" stroke="rgba(205,133,63,.45)" stroke-width="2" >
<title id="ctrMsg">播放/暂停</title>
<path d="M170 130,C-10 -30,210 -30,60 160"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(72 100 100)"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(144 100 100)"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(216 100 100)"/>
<path d="M170 130,C-10 -30,210 -30,60 160" transform="rotate(288 100 100)"/>
</g>
</defs>
<rect x="0" y="0" width="100%" height="100%" stroke="rgba(0,0,0,.2)"/>
<path class="linepath" d="M0 0 H1700 V900" />
<path class="linepath" d="M1700 900 H0 V0" />
<ellipse cx="520" cy="520" rx="210" ry="35" stroke="none" fill="rgba(171,105,74,.15)"/>
<use id="player" href="#cpath" x="412" y="300" width="20" height="20"/>
</svg>
</div>
<script>
mState = () => {
mama.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ctrMsg.textContent = aud.paused ? '点击播放' : '点击暂停';
aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
