这个不知行不

马黑黑 · 发表于 2022-12-31 19:34

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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>