本帖最后由 花简静 于 2024-12-29 11:03 编辑
<style>
#mama { margin: 130px 0 30px calc(50% - 961px); width: 1760px; height: 920px;background: url('https://642303.freep.cn/642303/tu/20241119dyfddf.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
#mama::after { position: absolute; content: 'By Jianjing'; background: #eee; border-radius: 0 12px 12px 0; left: 0; width: 150px; height: 40px; display: grid; place-items: center; }
#msvg { position: absolute; left: calc(50% + 60px);top:44%; width: 150px; height: 150px; cursor: pointer; opacity: .75;animation: rot 8s linear infinite var(--run); }
#prog { position: absolute;left:45%; bottom: 337px; width: 450px; height: 1px; background: #909a61; display: grid; place-items: center; cursor: pointer; --prog: 0%; }
#prog::before { position: absolute; content: attr(data-tt); left: -50px; right: -50px; text-align:justify; text-align-last: justify; font-size: 14px; color: #db8047; }
#prog::after { position: absolute; content: ''; left: calc(var(--prog) - 6px); width: 12px; height: 12px; border-radius: 50%; background: #909a61; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover;opacity: .15; -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=408532724"></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 id="prog"></div>
</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?v=1.02';
var dr = draw.dr('msvg');
var mDatas = { pa: mama, aud: aud, btn: msvg, prog: prog, cssval: '--run' };
let audio = new Aud(mDatas);
audio.play();
var tt = 9, R = 75, r = 50, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M75 75';
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)} Q75 75,${x2.toFixed(2)} ${y2.toFixed(2)} L75 75`;
}
dr.marker('m1', 2.5, 2.5, 1.25, 1.25);
dr.circle(1.25,1.25,1.25,'#909a61').addTo('m1');
dr.path(pstr, 'rgba(255,215,0,.3)', '#db8047', 2).sets({'marker-mid'span>: 'url(#m1)', 'stroke-dasharray'span>: '4 8'}).animate('animate', {
attributeName: 'stroke-dashoffset',
to: 300,
dur: '4s',
repeatCount: 'indefinite'
});
</script>
| 
