帖子代码：
<style>
#mama { margin: 30px 0 30px calc(50% - 690px); width: 1200px; height: 700px; background: black url('https://638183.freep.cn/638183/small/time.jpg') no-repeat center/ 400px 400px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#msvg { position: absolute; top: calc(50% - 155px); width: 300px; height: 300px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mama">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=436355180"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/03/04/video64edb448b4da6.mp4" autoplay loop muted></video>
<svg id="msvg"></svg>
</div>
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';
var dr = draw.dr('msvg');
var mDatas = { pa: mama, aud: aud, btn: msvg, cssval: '--run' };
let audio = new Aud(mDatas);
audio.play();
var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i <= tt; i ++) {
var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'red').addTo('m1');
dr.path(pstr, 'rgba(20,20,100,.3)', 'red', 2).sets({'marker-mid': 'url(#m1)', 'stroke-dasharray': '4 8'}).animate('animate', {
attributeName: 'stroke-dashoffset',
to: 300,
dur: '4s',
repeatCount: 'indefinite'
});
</script>
| 
发表于 2024-11-19 08:06
发表于 2024-11-19 19:29