本帖最后由 花飞飞 于 2024-10-30 09:39 编辑 <br /><br /><style>
#pa { margin: 130px 0 30px calc(50% - 931px); 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%; mix-blend-mode:soft-light; mix-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); -webkit-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>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr(msvg);
dr.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);
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>
花飞飞 发表于 2024-9-24 20:20
半懂不懂。。。聊啥呢。。
我来翻个页
{:4_180:}
{:4_188:}
{:4_188:}
{:4_188:}
{:4_170:}
{:4_188:}
楼深
{:4_170:}
还高
{:4_187:}
{:4_187:}
{:4_188:}
{:4_188:}
{:4_188:}
{:4_169:}
{:4_191:}
{:4_200:}
本帖最后由 花飞飞 于 2025-2-2 11:09 编辑
{:4_204:}
{:4_428:}