帖子代码
<style>
#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/web/svg/ccf.svg') no-repeat center/ 60%,url('https://638183.freep.cn/638183/t24/webp2/warmlight.webp') no-repeat center/cover; box-shadow: 0 0 6px #666; position: relative; }
#psvg { position: absolute; left: calc(50% - 100px); top: calc(50% - 100px); filter: drop-shadow(2px 2px 0 #000); animation: rot 8s cubic-bezier(0.89, 0.04, 0.24, 1.03) infinite alternate var(--state); cursor: pointer; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456446090" autoplay loop></audio>
<svg id="psvg" width="200px" height="200px"><defs><path id="path1" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/></defs><text dx="40" dy="40" font-size="40" fill="plum" font-family="Arial"><textPath href="#path1" textLength="610">🕊️🐦⬛🐓🦢🪿🦩🐦🔥🦤🐥</textPath></text></svg>
</div>
<script>
aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
psvg.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
|