本帖最后由 花简静 于 2025-2-27 20:48 编辑
<style>
#mydiv { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/202411090204%E9%9D%A2%E5%85%B7.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; overflow: hidden; }
#msvg { position: absolute; bottom: 10px; cursor: pointer;/* animation: rot 10s linear infinite var(--state);*/ }
#msvg text { stroke-dasharray: 2; stroke-dashoffset: 0; transition: 1s; fill: none; stroke: cyan; stroke-width: 2; font: bold 60px sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 26; animation: flash 6s linear infinite var(--state); }
#msvg:hover text { fill: silver; }
#vid { position: absolute; width: 100%; height: 100%;left:-0px; object-fit: cover; mix-blend-mode: multiply;
-webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent);opacity: 0.69;
pointer-events: none; }
#vid1 { position: absolute; width: 34%; height: 46%;bottom:190px;right:50px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent); pointer-events: none;opacity: 0.93; }
#fsbtn { position: absolute; bottom: -150px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes flash { to { stroke-dashoffset: 160; } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1361800749" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2405179/00/02/33/5b569f2e5f759.mp4" autoplay loop muted></video>
<video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_preview/21/05/07/16/42/01/video6094fd595d7b2.mp4" autoplay loop muted></video>
<svg id="msvg" width="300" height="140"></svg>
<span id="fsbtn"></span>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.path('M20 160 A120 120,0 1 1,260 160', 'none').id('tp');
dr.text('').textPath('tp', '50%');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), vid1.play(),msvg.unpauseAnimations()) : (aud.pause(), vid.pause(),vid1.pause(), msvg.pauseAnimations());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>
| 
