赴大荒

马黑黑 发表于 2025-8-27 12:51

马黑黑 发表于 2025-8-27 12:51

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/f98.jpeg') no-repeat center/cover; --ma-size: 20%; }
#ma { left: 30px; top: 30px; z-index: 10; }
#btnFs { right: 30px; bottom: 30px; color: lightblue; border-color: currentColor!important; }
.plane { position: absolute; right: -150px; top: -200px; width: 200px; height: 200px; background: lightyellow; cursor: pointer; clip-path: path('M100 100,140 0,0 200,200 80'); animation: fly 9s var(--delay) linear infinite var(--state); --delay: 0s; }
.plane:nth-of-type(2) { background: lightblue; --delay: -3s; }
.plane:nth-of-type(3) { background: purple; --delay: -6s; }
@keyframes fly { to { right: 30%; top: 100%; } }
</style>

<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=2124415181" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/01/5b4f55c95539b.mp4" autoplay loop muted></video>
<div class="plane brightness"></div>
<div class="plane brightness"></div>
<div class="plane brightness"></div>
<div id="ma" class="brightness">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
</div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var tt = 5,
path = 'M0 -30,-20 0,0 -95,20 0 Z',
planes = pa.querySelectorAll('.plane');
Array.from({length: tt}).forEach((_,k) => {
dr.path(path, 'none', 'skyblue', 3).transform(`rotate(${360/tt*k})`);
});
planes.forEach(plane => {
plane.title = 'ALT+X';
plane.onclick = () => ma.click();
});
FS(pa,ma);
</script>
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

梦江南 发表于 2025-8-27 14:08

漂亮，黑黑老师辛苦了！{:4_187:}

花飞飞 发表于 2025-8-27 18:44

开篇最显眼的就是三个缓缓飞翔的箭头小飞机。。。
位置从right: -150px; top: -200px;开始，经过9S到达right: 30%; top: 100%;位置，实现从右上角到下方的滑翔。。

小飞机是路径画出来的，还复制了三个一样大的。。。如果想要不一样大小，可以跟昨天心形贴子一样，给后两个分别加个scale: 0.3;采用不同的数值就可以了吧。。

三架飞机延迟出现时间不同，所以看到的就依次排队亮相。。。{:4_173:}另外还有颜色不同。

花飞飞 发表于 2025-8-27 18:47

小飞机跟小播待遇一样，都能控制动态。。。
还贴心的给小飞机也加了与小播相同的触碰效果。。brightness,
开头还以为这是啥新式武器,看到小播设置就明白了..{:4_173:}

花飞飞 发表于 2025-8-27 18:49

小播也画了个跟飞机一样的造型.....
看数据差得不是一星半点.....
单瓣旋转5次后成五角星形状...
这个组合使得中间部分围成一个圈,看起来像是花心,好看......

花飞飞 发表于 2025-8-27 18:52

planes.forEach(plane => {
plane.title = 'ALT+X';
plane.onclick = () => ma.click();

这一句是把飞机跟小播绑在一起的..点飞击也可反向控制小播...{:4_173:}
它就不仅仅是装饰作用了.还有交互功能

花飞飞 发表于 2025-8-27 18:53

音乐是个纯乐...好听....
.标题吸睛.看到大荒老想到的是北大荒....
反正是记住了

马黑黑 发表于 2025-8-27 18:57

花飞飞发表于 2025-8-27 18:53
音乐是个纯乐...好听....
.标题吸睛.看到大荒老想到的是北大荒....
反正是记住了

去过呗

马黑黑 发表于 2025-8-27 18:59

花飞飞发表于 2025-8-27 18:52
planes.forEach(plane => {
plane.title = 'ALT+X';
plane.onclick = () => ma.click();

嗯，看出来了，不错。这个呢，假如样纸比较大，动作又不至于太快，是可以绑定交互操作的。

ma.click() 实际上相当于一个函数，ma 元素的点击操作。

马黑黑 发表于 2025-8-27 19:00

花飞飞发表于 2025-8-27 18:47
小飞机跟小播待遇一样，都能控制动态。。。
还贴心的给小飞机也加了与小播相同的触碰效果。。brightness,
...

鼠标指针移动到它时会高亮。.brightness 是 CSS 文档预设的一个选择器。

马黑黑 发表于 2025-8-27 19:01

花飞飞发表于 2025-8-27 18:49
小播也画了个跟飞机一样的造型.....
看数据差得不是一星半点.....
单瓣旋转5次后成五角星形状...

像是花心，不是心花就好{:4_170:}

马黑黑 发表于 2025-8-27 19:01

梦江南发表于 2025-8-27 14:08
漂亮，黑黑老师辛苦了！

{:4_190:}

马黑黑 发表于 2025-8-27 19:02

花飞飞发表于 2025-8-27 18:44
开篇最显眼的就是三个缓缓飞翔的箭头小飞机。。。
位置从right: -150px; top: -200px;开始，经过9S到达rig ...

对。可以设大设小，开始也想设置的，要去午休就没弄了

花飞飞 发表于 2025-8-27 19:10

马黑黑发表于 2025-8-27 18:57
去过呗

{:4_173:}你找这歌的时候有没有想到北大这三个字

花飞飞 发表于 2025-8-27 19:11

马黑黑发表于 2025-8-27 18:59
嗯，看出来了，不错。这个呢，假如样纸比较大，动作又不至于太快，是可以绑定交互操作的。

ma.click() ...

就是，跑太快逮不住也互动不了。。{:4_173:}

花飞飞 发表于 2025-8-27 19:12

马黑黑发表于 2025-8-27 19:00
鼠标指针移动到它时会高亮。.brightness 是 CSS 文档预设的一个选择器。

嗯哪，预设的有好几样，可以挑着用。。{:4_173:}看它跟得跟MA一样，就觉得应该触碰也会发亮

花飞飞 发表于 2025-8-27 19:15

马黑黑发表于 2025-8-27 19:01
像是花心，不是心花就好

重复旋转太有魅力了，总能把简单的图案绕成令人惊艳的复杂效果。。。
嘻嘻，就是字面意思，花的心。。
心不能乱花{:4_173:}

花飞飞 发表于 2025-8-27 19:16

马黑黑发表于 2025-8-27 19:02
对。可以设大设小，开始也想设置的，要去午休就没弄了

变大小加上去后看着应该也不错。。{:4_173:}
午休是个好习惯

红影发表于 2025-8-27 19:32

想了半天，还比划了半天，有点看不懂路径了，这M后面不带着L么。
不过不算是不是带的，遇到路径都要想半天，包括小播的路径。

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

赴大荒