|
|

楼主 |
发表于 2022-12-31 19:36
|
显示全部楼层
代码:
- <style>
- #papa { margin: auto; width: 74px; height: 500px; display: grid; place-items: center; background: black linear-gradient(to right bottom, hsla(25,40%,40%,.7), hsla(105,30%,20%,.9)); box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
- #mplayer { position: absolute; width: 200px; height: 200px; display: grid; place-items: center; cursor: pointer; }
- #mplayer::before { position: absolute; content: ''; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(45deg,snow,purple); }
- .circle { position: absolute; width: 20px; height: 20px; border: 1px solid olive; border-radius: 50%; transition: all .45s; }
- </style>
- <div id="papa">
- <div id="mplayer"></div>
- </div>
- <script>
- (function() {
- let circles = [];
- let flag = true;
- [...Array(30).keys()].forEach( (item) => {
- let size = Math.random()* mplayer.offsetWidth;
- let styles = ['solid','dotted','dashed'];
- item = document.createElement('span');
- item.className = 'circle';
- item.style.cssText += `
- width: ${size}px;
- height: ${size}px;
- border: 1px ${styles[Math.round(Math.random() * 3)]} #${Math.random().toString(16).substr(-6)};
- `;
- circles.push(item);
- mplayer.appendChild(item);
- });
- let update = () => {
- for(item of circles) {
- let size = flag ? Math.random()* mplayer.offsetWidth + 30 / 2 : 0;
- item.style.width = item.style.height = size + 'px';
- }
- setTimeout(update, 200);
- }
- mplayer.onclick = () => flag = !flag;
- update();
- })();
- </script>
复制代码
|
|