生命之光

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 620px;
   
6.         border: 1px solid tan;
   
7.         background: url('https://638183.freep.cn/638183/t23/2/umvg_r.jpg'),
   
8.                 url('https://638183.freep.cn/638183/rb2.jpg') no-repeat center/cover,
   
9.                 url('https://638183.freep.cn/638183/t22/gif/wave.gif') no-repeat 300px 480px;
   
10.         background-blend-mode: screen,screen;
    
11.         box-shadow: 0 0 8px #000;
    
12.         position: relative;
    
13.         --state: paused;
    
14. }
    
15. .circle {
    
16.         width: 100px;
    
17.         height: 100px;
    
18.         top: 0;left: 0;
    
19.         border-radius: 50%;
    
20.         border: 6px solid tan;
    
21.         border-color: red tan pink purple;
    
22.         box-sizing: border-box;
    
23.         background: url('https://638183.freep.cn/638183/t23/2/umvg.jpg') no-repeat center/cover;
    
24.         display: block;
    
25.         position: absolute;
    
26.         offset-path: path('M30 300 Q512 -200, 994 300');
    
27.         cursor: pointer;
    
28.         opacity: .65;
    
29.         animation: rot 6s var(--delay) infinite linear var(--state);
    
30. }
    
31. @keyframes rot { to { transform: rotate(360deg); } }
    
32. </style>
    
33. 
    
34. <div id="mydiv"></div>
    
35. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=132674" autoplay="autoplay" loop="loop"></audio>
    
36. 
    
37. <script>
    
38. (function() {
    
39.         let spans = [];
    
40.         let setRgb = () => {
    
41.                 let ar = [];
    
42.                 for(i = 0; i < 3; i ++) {
    
43.                         ar.push(Math.floor(Math.random() * 256));
    
44.                 }
    
45.                 return ar.join(',');
    
46.         };
    
47.         let mkEles = (papa,n) => {
    
48.                 Array.from({length: n}).forEach( (item,key) => {
    
49.                         item = document.createElement('span');
    
50.                         item.className = 'circle';
    
51.                         item.style.cssText += `
    
52.                                 border-color: rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()});
    
53.                                 offset-distance: ${100 / n * (key + .5)}%;
    
54.                                 --delay: ${Math.random() * -6}s;
    
55.                         `;
    
56.                         spans.push(item);
    
57.                         papa.appendChild(item);
    
58.                 });
    
59.         };
    
60.         mkEles(mydiv,8);
    
61.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
62.         aud.addEventListener('play', mState, false);
    
63.         aud.addEventListener('pause', mState, false);
    
64.         spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
    
65. })();
    
66. </script>

复制代码

岩新新

欣赏精彩制作！

马黑黑

本帖构造：一个主 div 带 8 个子 span 。

一、主 div 是帖子的主体，它有 3 个背景图片：

第一张正常显示，其尺寸与帖子设定的一样，无需其他参数；
第二张尺寸和帖子的不太一致，因此有 no-repeat 和 center/cover 参数值，使得图片平铺在帖子之上。两张图片重叠，需要给第二张一个融合滤镜，background-blend-mode: screen, ...; ，将该图的黑色背景去掉；
第三种是水纹动图（悄然做的小图），所以也不给它复制（no-repeat），并设定位置在帖子主元素的{300px，400px}处。它也是黑色底的图片，所以给的滤镜和第二张一样，这句滤镜设置，是针对第二、三张背景图片的： background-blend-mode: screen, screen; 。

二、8 个 span 标签：

① 在CSS中设置基本属性：宽、高、位置、形状、动画、布局用的 offset-path 路径等等；
② 通过JS将这 8 个 span 在页面加载时动态追加到帖子 div 标签中（代码从39行至60行）。

三、关于 offset-path 路径：

第 26 行，offset-path: path('M30 300 Q512 -200, 994 300'); ，路径 path 用的是二次贝塞尔曲线，这里解释一下：

M30 300 表示，将路径起始点移到 {30,300} 坐标处；
Q512 -200, 994 300 中有两组xy坐标，第一组 512，-200 是曲线的控制点，这个点在帖子X轴的中央、Y轴的上方 -200px 处；第二组 994 300 是曲线的终点xy坐标值。大写 Q 表示用绝对数值来表示坐标点，两组数值代表的都是基于帖子上的xy坐标。
而 offset-distance 则用于布置每一个圆圈在路径上的位置，这个工作由JS完成，第 53 行代码，offset-distance: ${100 / n * (key + .5)}%; ，优化过的算法，欢迎感兴趣的朋友一起讨论。

红影

8个小球播放器按钮，而且每个的外边框带颜色是构成是随机的。这个帖子里又好多新的东西

红影

马黑黑 发表于 2023-6-29 07:17
帖子代码

关于多个背景图片，黑黑之前讲过，这里算是复习了。
直接写成background-blend-mode: screen,screen;用于后两个图片，这个不太熟，还以为每个都要分开写呢

红影

马黑黑 发表于 2023-6-29 07:48
本帖构造：一个主 div 带 8 个子 span 。

一、主 div 是帖子的主体，它有 3 个背景图片：

关于8 个 span 标签的设置就不懂了，css部分还行，主要还是迷糊在JS上
40-46句是设置小球的边框颜色的？要是没这个环节，JS应该会简单很多吧。
‘offset-distance: ${100 / n * (key + .5)}%; ，优化过的算法’，这个没看懂。小球在总路径里占的百分比为什么要加.5？

马黑黑

醉美水芙蓉 发表于 2023-6-29 11:48
欣赏老师新作品！

马黑黑

红影 发表于 2023-6-29 10:31
关于8 个 span 标签的设置就不懂了，css部分还行，主要还是迷糊在JS上
40-46句是设置小球的边 ...

CSS不能动态地设置属性，它是静态的，设置完就完了。所以，需要JS来完成后续操作。

39行，设置一个数组，let span=[]; ， 用以装载 span 数组元素；

40-46行，设计一个函数，生成  rgb 颜色。rgb颜色格式为 rgb(R值, G值, B值) ，也就是红绿蓝三个值，所以用 for 语句循环三次；

47-59行，设计一个函数，用于生成 span 元素并追加到宿主元素中，参数 papa 是宿主元素，n 是 多少个span标签。其中：

遍历 n 次，每一次都里 item 变量作为 span 元素，该元素 className 为 circle，该元素追加的 CSS 样式为 ①  边框颜色，这里调用了前面的生成rgb颜色的函数四次，因为边框有四个；② offset-distance 属性，依据各自的序号 key 来计算它应在路径 offset-path 上的位置；③ CSS变量 --delay 的值，用负数是为了让各自随机提前运行关键帧动画，制造个体旋转的时差；④ 56和57行，分别是，将 item 即 span 标签加入数组 spans 中、将 item 即 span 标签追加到宿主元素中。

60行，运行生成span元素的函数。
64行：所有 span 标签的单击操作事件。

马黑黑

红影 发表于 2023-6-29 10:11
关于多个背景图片，黑黑之前讲过，这里算是复习了。
直接写成background-blend-mode: screen,screen;用 ...

像本帖这样有三个背景图片，第一个是不用设置的，仅设置第二、三个。也就是说，

background-blend-mode: screen,screen;

两个融合滤镜值仅作用于第二和第三个背景图片。

假如我们这么设置背景：

background: #eee url(...), url(...), url(...);

则，第一个背景颜色是 #eee，这时，融合滤镜理论上要这么设置：

background-blend-mode: normal, screen,screen;

第一张图片用 normal 即正常滤镜就是不用滤镜，第二和第三张使用 screen 滤镜值。

马黑黑

红影 发表于 2023-6-29 10:31
关于8 个 span 标签的设置就不懂了，css部分还行，主要还是迷糊在JS上
40-46句是设置小球的边 ...

优化后的公式看不懂正常。如果不优化，应看就能懂。

初中数学的提取公因式应该不会忘吧？想想能不能还原出优化前的式子。

梦缘

问好老师，欣赏精彩佳作，谢谢分享，点赞！

梦油

八个圆各个都有 “机关” 啊！这八个都是播放器吧？

红影

马黑黑 发表于 2023-6-29 12:32
CSS不能动态地设置属性，它是静态的，设置完就完了。所以，需要JS来完成后续操作。

39行，设置一个数 ...

这个解释更清晰了，谢谢黑黑

红影

马黑黑 发表于 2023-6-29 12:43
像本帖这样有三个背景图片，第一个是不用设置的，仅设置第二、三个。也就是说，

background-blend-mod ...

哦，这里还有这样的细节需要注意啊，现在知道了

红影

马黑黑 发表于 2023-6-29 12:47
优化后的公式看不懂正常。如果不优化，应看就能懂。

初中数学的提取公因式应该不会忘吧？想想能不能还 ...

打开这个算式就是100% / n * key +50% / n ？还是没明白为什么加后面这个

马黑黑

红影 发表于 2023-6-29 19:36
打开这个算式就是100% / n * key +50% / n ？还是没明白为什么加后面这个

你这个这是学霸的解法：100% / n * key + 50% / n

我不是学霸，是这么列算式的：100 / n * key + 100 / n / 2

这是有意思的：① 100 / n 是获得 n 个元素的百分比平均值，100 / n * key 则得出第 key 个元素在路径上处在百分之几的位置；② 由于元素有宽度，在offset-path 路径上要均匀分布，需要作细微调整，就是，每一个元素在自己的百分比位置上往右挪动平均百分比的一半，即 100 / n / 2，因此，初始算式是 100 / n * key + 100 / n / 2

马黑黑

红影 发表于 2023-6-29 19:32
哦，这里还有这样的细节需要注意啊，现在知道了

这需要实际操作、总结经验

马黑黑

红影 发表于 2023-6-29 19:30
这个解释更清晰了，谢谢黑黑

网页的动态与交互，基本离不开JS