|
|

楼主 |
发表于 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>
复制代码
|
|