寂寞苍穹

马黑黑

lrc

00:00 | 00:00

马黑黑

珠子特效代码：

一、CSS：

.ball {
        --ss: 0s;
        position: absolute;
        width: 10px;
        height: 10px;
        left: 346px;
        top: 300px;
        border-radius: 50%;
        background: red;
        offset-distance: 0;
        offset-path: path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");
        animation: move 6s var(--ss) linear infinite;
}
@keyframes move { to { offset-distance: 100%;} }


二、HTML：确保有 id="papa" 的父元素（也可以修改JS重命名父元素id

三、JS：

let setColor = () => Math.random().toString(16).substr(-6); //生成随机16进制颜色
//生成珠子
Array.from({length: 60}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
        papa.appendChild(ele);
});

马黑黑

珠子沿心形轨迹运行原理：

利用CSS关键帧动画@keyframes，调用svg之path路径，从而可以驱动元素按预设轨迹运动。具体方案是，在需要运动的元素CSS选择器加入 offset-path 属性，该属性用语句 path("...") 描述路径，描述方法完全是svg的路径描述规范，并设置 offset-distance 属性，该属性意为元素在路径上的距离，这里设置的是初始距离，可以理解为是元素在路径上的出发点。接着，设计一个关键帧动画，设置元素要到达路径的何处，比如 100%，可以理解为是路径的终点。心形路径是闭合路径，只要在元素的 animation 属性中设置了 infinite（循环），则元素会永远沿着心形路径运动。

JS批量创建珠子，并追加到父元素中。

这些珠子，初始时的物理位置，都在 .ball 选择器中进行了定位。如果觉得对珠子定位困难，可以考虑将珠子追加到另一个元素中（该元素为父元素的子元素），然后对该元素进行定位。不论如何操作，珠子的 position 必须设为 absolute，否则不会乖乖听话。

马黑黑

帖子其余代码均为常规HTML+CSS+JS代码，和近期发布的帖子相类似甚至相同，无需分析

马黑黑

关于svg心形路径，请移步 手工用svg画个心形路径，刚画的时候不够顺滑，后面感觉越来越好，也可以去找找路径生成工具制作

加林森

这个制作有意思。挺好玩的。老黑早晨好！

马黑黑

加林森 发表于 2022-9-14 07:44
这个制作有意思。挺好玩的。老黑早晨好！

早

加林森

马黑黑 发表于 2022-9-14 07:45
早

红影

这个应该是最后画的那个心形吧，用了四个二次赛贝尔曲线，心形拟合得非常完美，随机色的珠子也很漂亮。
比较单薄的背景，有了这些珠子的加持，变得特别灵动

红影

马黑黑 发表于 2022-9-14 06:59
珠子特效代码：

一、CSS：

珠子的个数不知道怎么确定的，是根据路线长度除以半径来的么？不对，是除以直径。若少了应该是会有断档吧？

马黑黑

醉美水芙蓉 发表于 2022-9-14 11:39
这个特效好漂亮哦！欣赏黑黑老师新作品！

马黑黑

红影 发表于 2022-9-14 09:38
珠子的个数不知道怎么确定的，是根据路线长度除以半径来的么？不对，是除以直径。若少了应该是会有断档吧 ...

珠子的大小也要算计在内。这个一般不用精准计算。路径闭合、几近圆形，综合一下珠子尺寸，就60个，不对调整一下

马黑黑

红影 发表于 2022-9-14 09:33
这个应该是最后画的那个心形吧，用了四个二次赛贝尔曲线，心形拟合得非常完美，随机色的珠子也很漂亮。
比 ...

梦缘

感谢老师的精彩代码分享，欣赏点赞！

小辣椒

黒黑新珠珠样式出笼

小辣椒

这个播放器歌词是彩色的了

小辣椒

每天有变化，黑黑你太有才的，佩服S

马黑黑

小辣椒 发表于 2022-9-14 18:29
每天有变化，黑黑你太有才的，佩服S

变变更快乐

马黑黑

梦缘 发表于 2022-9-14 17:23
感谢老师的精彩代码分享，欣赏点赞！

谢谢