2024年10月24日 星期四
<style>
#pa { margin: 30px 0 30px calc(50% - 602px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp2/truck.webp') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.myball { offset-path: path('M 765 75 Q 950 400,590 526 T 0 0'); offset-distance: 0%; animation: move 10s var(--delay) linear infinite var(--state); }
#player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
@keyframes move { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33682225" autoplay loop></audio>
<svg id="msvg" width="100%" height="100%"></svg>
</div>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr(msvg);
dr.defs('defs'); //创建defs标签
//小球
dr.g('g1').addTo('defs');
dr.circle(0,0,6,'#fff').addTo('g1');
for(i = 0; i < 20; i ++) {
let delay = -0.5 * i + 's';
dr.use('#g1').set('class', 'myball').style(`--delay: ${delay}`);
}
//渐变
var stop = `
<stop offset="0%" stop-color="darkred"/>
<stop offset="50%" stop-color="green"/>
<stop offset="100" stop-color="red"/>
`;
var attr = {id: 'lgd', x1: 1, x2: 0, y1: 1, y2: 1};
dr.gradient('linearGradient', attr, stop);
//小播 : path 添加到 player
dr.g('player').addTo('defs');
for(var i = 0, tt = 10; i < tt; i++) {
dr.path('M80 80 Q-120 90, 50 10', 'transparent', 'url(#lgd)', 8, 'round').transform(`rotate(${360/tt*i} 80 80)`).addTo('player');
}
dr.use('#player', 450, 300); //实例化小播
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
};
</script>
| 
发表于 2024-10-12 22:48
说的就是 我