Magic Travel（学习黑黑Truck效果）
<style>#pa { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/671c2841d29ded1a8c9c3f3a.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); z-index: 1; position: relative;overflow: hidden; }
.myball { offset-path: path('m533,313c-2,-15 -64,-23 -72,-18c-9,-4 -92,39 -111.00001,34.51999c-20.99999,2.48001 -82.99999,-70.52 -131,-88c-26.99999,-15.52 -138,22.48 -149,16c-7,6.48 -63,5.48 -63,5'); offset-distance: 0%; animation: move2 10s var(--delay) linear infinite var(--state); }
.myball2 { offset-path: path('m750,320c0,0 42,-29 69,-21c17,-9 104,39 122,31c22,3 116,-97.00001 145,-89.00001c16,-12 117.08001,21 123.08001,19c12,6 84,6 84,6'); offset-distance: 0%; animation: move2 10s var(--delay) linear infinite var(--state); }
.myball3 { offset-path: path('m728,349c42.00001,19 79.00001,102 79.00001,102c33,5 81,-9 81,-9c-5,76 64,146 64,146c42,82 216,123 238,118'); offset-distance: 0%; animation: move2 10s var(--delay) linear infinite var(--state); }
.myball4 { offset-path: path('m565,352.60002c-59,21 -78,95 -78,95c-16,18 -58,-25 -82,-10c13,63 -72,144 -72,144c-79,102 -180.00001,118 -229.00001,121'); offset-distance: 0%; animation: move2 10s var(--delay) linear infinite var(--state); }
#player { cursor: pointer; transform-box: fill-box; transform-origin: center; animation:rot 10s linear infinite var(--state) }
.vid { position: absolute;object-fit: cover; pointer-events: none; mix-blend-mode:screen; }
.vid:nth-of-type(1) { width: 56%; height: 56%; left:282px; top:36px; border-radius: 50%;opacity: 0.85; -webkit-mask: radial-gradient(circle,red,transparent,transparent); }
.vid:nth-of-type(2) {width: 100%; height: 110%; top:-70px; opacity: 0.35;}
#wenzi { position: absolute; bottom: 60px; left:506px; width: fit-content; color: DeepSkyBlue; font: bold 3.5em Times New Roman; font-style: italic; text-shadow: 1px 1px 2px gray, 2px 2px 4px #fff; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.55)); }
@keyframes move2 { 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>
<video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/81/5b4aa68c265b9_10s_big.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/01/65/5b475808cb915_10s_big.mp4" autoplay loop muted></video>
<svg id="msvg" width="100%" height="100%"></svg>
<div id="wenzi">Magic Travel</div>
</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');
dr.g('g1').addTo('defs');
dr.circle(0,0,6,'#79f5fc').addTo('g1');
for(i = 0; i < 20; i ++) {
let delay = -0.5 * i + 's';
dr.use('#g1').set('class', 'myball').style(`--delay: ${delay}`);
}
dr.g('g2').addTo('defs');
dr.circle(0,0,6,'#79f5fc').addTo('g2');
for(i = 0; i < 20; i ++) {
let delay = -0.5 * i + 's';
dr.use('#g2').set('class', 'myball2').style(`--delay: ${delay}`);
}
dr.g('g3').addTo('defs');
dr.circle(0,0,6,'#79f5fc').addTo('g3');
for(i = 0; i < 20; i ++) {
let delay = -0.5 * i + 's';
dr.use('#g3').set('class', 'myball3').style(`--delay: ${delay}`);
}
dr.g('g4').addTo('defs');
dr.circle(0,0,6,'#79f5fc').addTo('g4');
for(i = 0; i < 20; i ++) {
let delay = -0.5 * i + 's';
dr.use('#g4').set('class', 'myball4').style(`--delay: ${delay}`);
}
var stop = `
<stop offset="0%" stop-color="green"/>
<stop offset="50%" stop-color="Auqamarin"/>
<stop offset="100" stop-color="DeepSkyBlue"/>
`;
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('M80 80 Q-210 90, 40 -20', 'transparent', 'url(#lgd)', 12, 'round').transform(`rotate(${360/tt*i} 80 80)`).addTo('player');
}
dr.use('#player', 560, 157);
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> 多加了几条粒子玩玩。本来想小播下面再加个视频，发现多加的视频不知道怎么暂停了@马黑黑 {:4_204:} 去文字仓库找了个投影字，本来想加svg渐变字，发现多个js封装一样怕用不出来，就直接跑文字仓库了{:4_173:} https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif
这四条粒子移动像极了海里的八爪鱼，太漂亮完美了！{:4_187:} 红影 发表于 2024-10-26 13:37
多加了几条粒子玩玩。本来想小播下面再加个视频，发现多加的视频不知道怎么暂停了@马黑黑
猴子摘玉米啦{:4_170:} 路径的设计完美无瑕，与背景百分百融合。视频的处理也是恰到好处 欣赏佳作，问候红影。 起个网名好难 发表于 2024-10-26 14:04
谢谢难难，还是跟着难难学会的去找svg路径的呢{:4_187:} 梦江南 发表于 2024-10-26 14:52
这四条粒子移动像极了海里的八爪鱼，太漂亮完美了！
我也不知道那底图是个什么东西，看着好玩，就拿来做帖子了{:4_170:} 马黑黑 发表于 2024-10-26 15:52
猴子摘玉米啦
咋成了猴子摘玉米，你这思维太灵动了{:4_189:} 马黑黑 发表于 2024-10-26 15:53
路径的设计完美无瑕，与背景百分百融合。视频的处理也是恰到好处
想多加个视频的，第二个视频不会弄暂停{:5_102:} 梦油 发表于 2024-10-26 16:38
欣赏佳作，问候红影。
谢谢梦油的支持，我跟在后面玩玩，好多作业都没完成呢{:4_173:} 醉美水芙蓉 发表于 2024-10-26 16:52
红影路径设计漂亮！
多谢水芙蓉美女鼓励{:4_187:} 红影 发表于 2024-10-26 19:40
想多加个视频的，第二个视频不会弄暂停
给 video 设置 class 选择器，替代 id 选择器，video标签 id="vid" 改为 class="vid"；
声明 vids 变量并获取它的值：var vids = document.querySelectorAll('.vid');
mState() 函数对 vid 的控制语句 aud.paused ? vid.pause() : vid.play() 改为：
vids.forEach(vid => aud.paused ? vid.pause() : vid.play()); 红影 发表于 2024-10-26 19:38
谢谢难难，还是跟着难难学会的去找svg路径的呢
感觉直接写svg代码还容易理解些。 红影 发表于 2024-10-26 19:39
咋成了猴子摘玉米，你这思维太灵动了
{:4_172:} 相当震撼的作品，影子把粒子路径与背景图片花纹完美结合在一起，太厉害了。。{:4_199:} 色彩好漂亮啊，清爽宜人，整个贴子从上到下还有个渐变的感觉，层次分明同时又过渡自然{:4_187:}