论坛 › 马黑黑教程专版 › 这个可以干啥

马黑黑 发表于 2023-8-28 19:40

这个可以干啥

本帖最后由 马黑黑 于 2023-8-28 19:43 编辑 <br /><br /><style>
#wrapper {
        position: absolute;
        display: flex;
        width: fit-content;
        height: fit-content;
        /* border仅用于观察 */
        border: 1px solid red;
}
#mydiv {
        width: 260px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
}
#copydiv { transform: rotateY(-180deg); }
pin-pu {
        margin-right: 1px;
        width: 1px;
        height: 10px;
        background: blue;
        animation: change .4s var(--delay) infinite alternate linear;
}
@keyframes change {
        from { height: 2px; }
        to { height: var(--hh); }
}
</style>

<div id="wrapper">
        <div id="mydiv"></div>
        <div id="copydiv"></div>
</div>

<script>

/* 除以几依据 pin-pu 标签的 width + 希望的间隔值即 margin-right 值 */
let total = Math.ceil(mydiv.offsetWidth / 2);

Array.from({length: total}).forEach((item,key) => {
        item = document.createElement('pin-pu');
        item.style.cssText += `
                background: #${Math.random().toString(16).substr(-6)};
                height: ${Math.random() * mydiv.offsetHeight}px;
                --hh: ${mydiv.offsetHeight / 2 + Math.random() * mydiv.offsetHeight / 2}px;
                --delay: -${Math.random()}s;
        `;
        mydiv.appendChild(item);
});

let node = mydiv;
let clone = node.cloneNode(true);
copydiv.appendChild(clone);

</script>

马黑黑 发表于 2023-8-28 19:40

本帖最后由 马黑黑 于 2023-8-28 19:44 编辑

代码分享
<style>
#wrapper {
      position: absolute;
      display: flex;
      width: fit-content;
      height: fit-content;
      /* border仅用于观察 */
      border: 1px solid red;
}
#mydiv {
      width: 260px;
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
}
#copydiv { transform: rotateY(-180deg); }
pin-pu {
      margin-right: 1px;
      width: 1px;
      height: 10px;
      background: blue;
      animation: change .4s var(--delay) infinite alternate linear;
}
@keyframes change {
      from { height: 2px; }
      to { height: var(--hh); }
}
</style>

<div id="wrapper">
      <div id="mydiv"></div>
      <div id="copydiv"></div>
</div>

<script>

/* 除以几依据 pin-pu 标签的 width + 希望的间隔值即 margin-right 值 */
let total = Math.ceil(mydiv.offsetWidth / 2);

Array.from({length: total}).forEach((item,key) => {
      item = document.createElement('pin-pu');
      item.style.cssText += `
                background: #${Math.random().toString(16).substr(-6)};
                height: ${Math.random() * mydiv.offsetHeight}px;
                --hh: ${mydiv.offsetHeight / 2 + Math.random() * mydiv.offsetHeight / 2}px;
                --delay: -${Math.random()}s;
      `;
      mydiv.appendChild(item);
});

let node = mydiv;
let clone = node.cloneNode(true);
copydiv.appendChild(clone);

</script>

亦是金 发表于 2023-8-28 19:56

不知道能派上啥用场？静等老师展示！{:4_189:}

红影 发表于 2023-8-28 19:56

这个也是音波啊，漂亮{:4_199:}

红影 发表于 2023-8-28 20:16

频谱宽1，间隔1,130个小条应该最后总宽度还是260，看到#copydiv { transform: rotateY(-180deg); }才知道怎么变成520的宽了。
这个用得巧妙，这样可以少几个小条了吧，可以防止拖慢速度。{:4_204:}

马黑黑 发表于 2023-8-28 20:48

红影 发表于 2023-8-28 20:16
频谱宽1，间隔1,130个小条应该最后总宽度还是260，看到#copydiv { transform: rotateY(-180deg); }才知道怎 ...

这也是克隆节点的一个应用吧

马黑黑 发表于 2023-8-28 20:48

亦是金 发表于 2023-8-28 19:56
不知道能派上啥用场？静等老师展示！

做装饰用也是可以的

马黑黑 发表于 2023-8-28 20:49

红影 发表于 2023-8-28 19:56
这个也是音波啊，漂亮

之前做过一个的

千羽 发表于 2023-8-28 20:54

用这个的缩小版做播放器会很精致唯美的{:4_187:}

马黑黑 发表于 2023-8-28 20:55

千羽 发表于 2023-8-28 20:54
用这个的缩小版做播放器会很精致唯美的

是的，这个想法挺好

千羽 发表于 2023-8-28 21:04

马黑黑 发表于 2023-8-28 20:55
是的，这个想法挺好

受到黑黑老师表扬了，高兴中{:4_173:}

红影 发表于 2023-8-28 21:05

马黑黑 发表于 2023-8-28 20:48
这也是克隆节点的一个应用吧

哦，对，前面黑黑专门讲过克隆的知识呢{:4_204:}

马黑黑 发表于 2023-8-28 21:05

千羽 发表于 2023-8-28 21:04
受到黑黑老师表扬了，高兴中

{:4_172:}

马黑黑 发表于 2023-8-28 21:05

红影 发表于 2023-8-28 21:05
哦，对，前面黑黑专门讲过克隆的知识呢

是的

红影 发表于 2023-8-28 21:06

马黑黑 发表于 2023-8-28 20:49
之前做过一个的

记得做过往上的，这个是往两边的啊。

马黑黑 发表于 2023-8-28 21:07

红影 发表于 2023-8-28 21:06
记得做过往上的，这个是往两边的啊。

做过的

亦是金 发表于 2023-8-28 21:32

马黑黑 发表于 2023-8-28 20:48
做装饰用也是可以的

好的，我去试试！{:4_189:}

马黑黑 发表于 2023-8-28 21:38

亦是金 发表于 2023-8-28 21:32
好的，我去试试！

{:4_191:}

红影 发表于 2023-8-28 21:59

马黑黑 发表于 2023-8-28 21:05
是的

我得赶紧回去再学习一下{:4_173:}

红影 发表于 2023-8-28 22:00

马黑黑 发表于 2023-8-28 21:07
做过的

这个比前面做的那个还漂亮{:4_187:}

查看完整版本: 这个可以干啥