非有非空 (DJ默涵版)

:doodle { @size: 160px; left: 50px; top: 5px;animation: rot 6s infinite linear var(--state); cursor: pointer; } background: rgba(255,100,0,.7); clip-path: @shape( points: 300; scale: .25; x: 2 * cos(t) + cos(8t); y: 2 * sin(t) - sin(8t); );

HUACHAO

南无月

这个是真漂亮，心形里给了个十分靓眼的视频，歌曲欢快，节奏感极强，好听

南无月 发表于 2023-6-24 22:19
这个是真漂亮，心形里给了个十分靓眼的视频，歌曲欢快，节奏感极强，好听

这个跟着你学得呢！你的播放器挺多的！

岩新新

欣赏聆听!

红影

这个心形剪裁也做得很漂亮呢。歌曲好听，制作美妙。欣赏水芙蓉美女好帖

马黑黑

镂空，视频以心形出现。
这个实现法，也可以不用镂空，直接用polygon裁剪视频

红影 发表于 2023-6-24 23:23
这个心形剪裁也做得很漂亮呢。歌曲好听，制作美妙。欣赏水芙蓉美女好帖

谢谢红影美女点评！

马黑黑 发表于 2023-6-24 23:38
镂空，视频以心形出现。
这个实现法，也可以不用镂空，直接用polygon裁剪视频

还没有学会呢？黑黑老师这个视频是倒的，如何调过来？

马黑黑

醉美水芙蓉 发表于 2023-6-25 06:39
还没有学会呢？黑黑老师这个视频是倒的，如何调过来？

你是有canvas画布还原视频的，canvas也是一个HTML元素，你要旋转它，就用 transform: rotate(xxdeg); ，例如你要旋转180度：

transform: rotate(180deg);

马黑黑 发表于 2023-6-25 07:46
你是有canvas画布还原视频的，canvas也是一个HTML元素，你要旋转它，就用 transform: rotate(xxdeg); ， ...

那这样是不是只能跟着心形图形旋转了？

马黑黑

醉美水芙蓉 发表于 2023-6-25 11:49
那这样是不是只能跟着心形图形旋转了？

你试试看才知道

红影

醉美水芙蓉 发表于 2023-6-25 06:37
谢谢红影美女点评！

客气了，这个制作真漂亮

南无月

醉美水芙蓉 发表于 2023-6-24 22:37
这个跟着你学得呢！你的播放器挺多的！

小播都是从我发的素材网站里找的，代码替换就有了

南无月 发表于 2023-6-25 17:32
小播都是从我发的素材网站里找的，代码替换就有了

哪一个我怎么没有看到呢？

南无月

醉美水芙蓉 发表于 2023-6-25 17:43
哪一个我怎么没有看到呢？

https://www.huachaowang.com/foru ... &extra=page%3D2

这里第一个网站，图案

https://css-doodle.com/shapes/#collection   css-doodle图案网站

小播代码：
clip-path: @shape( fill-rule: evenodd; split: 200; scale: .45; x: cos(2t) + cos(π - 5t); y: sin(2t) + sin(π - 5t); );

南无月

进去后直接点最大的那个图案，就看到集子了

马黑黑 发表于 2023-6-25 07:46
你是有canvas画布还原视频的，canvas也是一个HTML元素，你要旋转它，就用 transform: rotate(xxdeg); ， ...

谢谢黑黑老师瞎折腾成功了！

南无月 发表于 2023-6-25 17:49
进去后直接点最大的那个图案，就看到集子了

谢谢月儿！真的有好多！

马黑黑

醉美水芙蓉 发表于 2023-6-25 17:54
谢谢黑黑老师瞎折腾成功了！

尝试总会有所收获

南无月

醉美水芙蓉 发表于 2023-6-25 17:55
谢谢月儿！真的有好多！

不客气，玩得开心哈