Magic Travel（学习黑黑Truck效果）

小辣椒

亲爱的，还可以找到这种类型的图图，厉害

花飞飞

小播的颜色跟背景图片的颜色以及粒子色彩设为同色系，影子真是色彩大师~~运用的得心应手。。
整个贴子加上视频更显灵动~~
整个作品构思、创意、代码，效果都非常精彩。

小辣椒

这4条路径设置的非常漂亮，和背景图神同步，赞哦！！！

小辣椒

亲爱的就是厉害，制作效果非常完美

花飞飞

马黑黑 发表于 2024-10-26 20:37
给 video 设置 class 选择器，替代 id 选择器，video标签 id="vid" 改为 class="vid"；

声明 vids 变 ...

这个太好了。。可以加多个视频。。
改为.vid。然后再添加.vid:nth-of-type(1)  .vid:nth-of-type(2) 这样子的么。

红影

马黑黑 发表于 2024-10-26 20:37
给 video 设置 class 选择器，替代 id 选择器，video标签 id="vid" 改为 class="vid"；

声明 vids 变 ...

谢谢黑黑，我改好了，又加了个视频上去

其实之前试的时候，前面的声明 vids 变量我加完后把最后一句写错了，写成了
var mState = () => vids.forEach(vid => aud.paused ?
        (vid.pause(), pa.style.setProperty('--state', 'paused')) :
        (vid.play(),  pa.style.setProperty('--state', 'running')));

还有改成class 选择器后忘了在html里修改，总之各种错误导致弄不出来，后来就只能放弃加俩了

红影

起个网名好难 发表于 2024-10-26 20:38
感觉直接写svg代码还容易理解些。

这个也是直接写路径呢，差不多，只不过路径在css里

红影

马黑黑 发表于 2024-10-26 20:38

说到玉米，今天还真吃了煮嫩玉米。玉米这东西味道很浓烈，我都不知道他煮玉米，在厅里玩着玩着，忽然就闻到煮玉米的香味了，中间都隔着好几个房间呢，味道真的太厉害了

红影

花飞飞 发表于 2024-10-26 21:07
相当震撼的作品，影子把粒子路径与背景图片花纹完美结合在一起，太厉害了。。

哈哈，谢谢飞飞，正好看到这图图，就想着多弄点粒子玩玩

红影

花飞飞 发表于 2024-10-26 21:09
色彩好漂亮啊，清爽宜人，整个贴子从上到下还有个渐变的感觉，层次分明同时又过渡自然

我按黑黑说的方法，又加了个视频进去，不知道会不会破坏飞飞说的渐变效果呢。
飞飞看帖特别仔细呢，有你这么认真地看，忽然就觉得很感动

红影

小辣椒 发表于 2024-10-26 21:11
亲爱的，还可以找到这种类型的图图，厉害

想着也跟在后面做个帖子，然后就去乱找图图，遇到这个就用了

红影

花飞飞 发表于 2024-10-26 21:12
小播的颜色跟背景图片的颜色以及粒子色彩设为同色系，影子真是色彩大师~~运用的得心应手。。
整个贴子加上 ...

哪里啊，其实我真弄不好颜色，图省力，有些就直接用同色了，偷懒的做法

红影

小辣椒 发表于 2024-10-26 21:12
这4条路径设置的非常漂亮，和背景图神同步，赞哦！！！

总觉得粒子路径和图图呼应一下比较好，然后，就去找了图图的线条路径。
谢谢亲爱的鼓励

马黑黑

红影 发表于 2024-10-26 22:31
说到玉米，今天还真吃了煮嫩玉米。玉米这东西味道很浓烈，我都不知道他煮玉米，在厅里玩着玩着，忽然就闻 ...

玉米是玛雅文明的产生，纯纯农业的发明

红影

小辣椒 发表于 2024-10-26 21:12
亲爱的就是厉害，制作效果非常完美

没有什么厉害呢，大家都在学习黑黑的这个效果，我是最后才弄完的，比你们都差远了。
对了，我又加了个视频在小播后面，亲爱的看看可以不。

马黑黑

红影 发表于 2024-10-26 22:27
谢谢黑黑，我改好了，又加了个视频上去

其实之前试的时候，前面的声明 vids 变量我加完后把 ...

一切需要配套，好比一个家，得有人，有家具，有亲朋好友，有宠物

mState() 是一个函数，它里面可以控制很多东东，只要你想要：

mState = () => {
    //控制 CSS动画 : 元素.style.setProperty('--state', ...)
    //控制视频 : ....
    //控制其他 : ....
};

马黑黑

花飞飞 发表于 2024-10-26 21:15
这个太好了。。可以加多个视频。。
改为.vid。然后再添加.vid:nth-of-type(1)  .vid:nth-of-type(2) 这 ...

小白教程里面提到过类似的知识点和技能

红影

马黑黑 发表于 2024-10-26 22:40
玉米是玛雅文明的产生，纯纯农业的发明

养活了一代又一代各个地方的人，感谢这种植物对人类的付出

红影

马黑黑 发表于 2024-10-26 22:44
一切需要配套，好比一个家，得有人，有家具，有亲朋好友，有宠物

mState() 是一个函数，它里面可以控 ...

嗯嗯，通过这个帖子，又清楚了很多，谢谢黑黑

起个网名好难

红影 发表于 2024-10-26 22:29
这个也是直接写路径呢，差不多，只不过路径在css里

直接写SVG代码比用js写SVG代码更容易理解，因为SVG本身就是一套规则。