本帖最后由 花简静 于 2024-12-22 21:58 编辑
<style>
#pa { margin: 30px 0 30px calc(50% - 851px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20241027luori.webp') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative; }
.myball { offset-path: path('m1108.00071,586.66701c0,1.33334 22.66673,-18.66672 21.33563,-19.99883c1.33109,1.33212 18.66447,-14.66792 19.99781,-14.66792c1.33334,0 36.0001,-17.33338 34.669,-18.6655c1.3311,1.33212 21.33115,-21.33461 20.00005,-22.66673c1.3311,1.33212 11.99779,-16.00126 10.6667,-17.33338c1.3311,1.33212 11.99779,-4.00123 13.33113,-4.00123c1.33334,0 16.00004,0 17.33338,0c1.33334,0 26.66674,-8.00002 28.00008,-8.00002c1.33334,0 37.33343,-12.00003 38.66677,-12.00003c1.33334,0 21.33339,-25.3334 22.66673,-25.3334c1.33334,0 20.00005,-8.00002 22.66673,-9.33336c2.66667,-1.33334 24.00006,-32.00009 25.3334,-32.00009c1.33334,0 10.6667,-29.33341 10.6667,-30.66675c0,-1.33334 13.33337,-20.00005 14.66671,-20.00005c1.33334,0 18.66672,-17.33338 17.33562,-18.66549c1.3311,1.33211 25.33116,-20.00128 24.00006,-21.33339c1.3311,1.33211 26.6645,-17.3346 25.3334,-18.66672c1.3311,1.33211 38.66453,-14.66793 37.33343,-16.00004c1.3311,1.33211 19.99782,-4.00123 18.66672,-5.33335c1.3311,1.33211 21.33115,3.99879 21.33115,5.33212c0,1.33334 52.00014,-14.66671 54.66681,-10.6667c2.66667,4.00001 28.00008,10.6667 29.33341,10.6667c1.33334,0 42.66678,-9.33336 41.33568,-10.66547c1.3311,1.33211 15.99781,1.33211 14.66671,0'); offset-distance: 0%; animation: move 10s var(--delay) linear infinite var(--state); opacity: 0.39;}
#player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
.vid {
position: absolute;
}
.vid:nth-of-type(1) { width: 50%;
height: 50%;
object-fit: cover;
right:-10%;
top:5%;
mix-blend-mode:soft-light;
pointer-events: none;
opacity: 0.39;
-webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);
}
.vid:nth-of-type(2) {
width: 100%;
height: 100%;
object-fit: cover;
left:0%;
top:0%;
m ix-blend-mode:soft-light;
m ix-blend-mode:screen;
mix-blend-mode: color-dodge;
pointer-events: none;
opacity: 0.99;
-webkit-mask: linear-gradient(to left top, red 5%, transparent 85%, transparent);
-w ebkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent);
}
@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=2049686637" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/07/26/15/37/33/video60fe663dc65e1.mp4" autoplay loop muted></video>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/09/16/16/10/51/video6142fc0bb1f6c.mp4" autoplay loop muted></video>
<svg id="msvg" width="100%" height="100%"></svg>
</div>
<script src="https://638183.freep.cn/638183/web/js2024/svgdr_trial.js"></script>
<script>
var dr = _dr(msvg);
dr.defs('defs'); //创建defs标签
//小球
dr.g('g1').addTo('defs');
dr.circle(0,0,4,'#FFDEAD').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="Olive"/>
<stop offset="50%" stop-color="Gold"/>
<stop offset="100" stop-color="DarkOrange"/>
`;
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('M50 50 Q -60 60, 50 20', 'transparent', 'url(#lgd)', 1, 'round').transform(`rotate(${360/tt*i} 30 30)`).addTo('player');
}
dr.use('#player', 1400, 220); //实例化小播
var vids = document.querySelectorAll('.vid');
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mState = () =>{ pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());}
</script>
|
