论坛 › 马黑黑教程专版 › 这个不知行不

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

这个不知行不

<style>
#papa {margin: auto; width: 740px; height: 560px; 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.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>

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

小辣椒 发表于 2022-12-31 19:53

这个效果居然不用音乐就可以出来？

小辣椒 发表于 2022-12-31 19:54

这么多天没有玩了，黑黑许多东西我都没有看的。。。。

马黑黑 发表于 2022-12-31 20:01

小辣椒 发表于 2022-12-31 19:54
这么多天没有玩了，黑黑许多东西我都没有看的。。。。

这个是刚刚做好的

马黑黑 发表于 2022-12-31 20:02

小辣椒 发表于 2022-12-31 19:53
这个效果居然不用音乐就可以出来？

音乐不是一切。在插件里，可以用音乐控制它而已

梦油 发表于 2022-12-31 20:12

此处无声胜有声。

小辣椒 发表于 2022-12-31 20:30

马黑黑 发表于 2022-12-31 20:02
音乐不是一切。在插件里，可以用音乐控制它而已

哦，还得抽时间回去看看前面的教程

小辣椒 发表于 2022-12-31 20:30

马黑黑 发表于 2022-12-31 20:01
这个是刚刚做好的

看见了，我好像许多没有做了

马黑黑 发表于 2022-12-31 20:48

小辣椒 发表于 2022-12-31 20:30
看见了，我好像许多没有做了

也没多少

马黑黑 发表于 2022-12-31 20:48

小辣椒 发表于 2022-12-31 20:30
哦，还得抽时间回去看看前面的教程

{:4_191:}

马黑黑 发表于 2022-12-31 20:50

梦油 发表于 2022-12-31 20:12
此处无声胜有声。

演示一下动态效果

梦油 发表于 2022-12-31 21:13

马黑黑 发表于 2022-12-31 20:50
演示一下动态效果

蛮好，蛮好！

红影 发表于 2022-12-31 21:41

这个很漂亮啊，黑黑又带来新效果{:4_199:}

马黑黑 发表于 2022-12-31 21:51

红影 发表于 2022-12-31 21:41
这个很漂亮啊，黑黑又带来新效果

是背景漂亮吧{:4_170:}

马黑黑 发表于 2022-12-31 21:54

梦油 发表于 2022-12-31 21:13
蛮好，蛮好！

还行还行

红影 发表于 2022-12-31 22:21

马黑黑 发表于 2022-12-31 21:51
是背景漂亮吧

嗯，这个渐变背景很衬这个效果。

马黑黑 发表于 2022-12-31 22:21

红影 发表于 2022-12-31 22:21
嗯，这个渐变背景很衬这个效果。

{:4_181:}

亚伦影音工作室 发表于 2023-1-1 09:55

从其量是个css动画，可以成为仿频谱！

马黑黑 发表于 2023-1-1 10:20

亚伦影音工作室 发表于 2023-1-1 09:55
从其量是个css动画，可以成为仿频谱！

这个不是CSS关键帧动画哦

查看完整版本: 这个不知行不