论坛 › 马黑黑教程专版 › CSS+JS鸟巢

马黑黑 发表于 2022-11-7 22:42

CSS+JS鸟巢

《记事本》里压在笔记本上面的东东，最先是用CSS+JS模拟 css-doodle 的一个示例，当然，二者实现的手段和方式完全不一样，我只是去模拟一下它的基本构造，总体外观大致一样。其实，类似的东东我们之前做过，那时的效果更为惊艳，不知哪位会有印象。以下是原创代码：
<style>
#papa {
        margin: auto;
        display: grid;
        place-items: center;
        width: 740px;
        height: 600px;
        position: relative;
}
.sons {
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 30%; /* 修改这里会得到不同的效果，比如记事本用的是：0 40% */
}
</style>

<div id="papa"></div>

<script>
(function () {
        let size = 400, total = 60;
        Array.from({ length: total }).forEach((ele, key) => {
                ele = document.createElement("span");
                ele.className = "sons";
                ele.style.cssText += `
                                width: ${((key + 1) * size) / total}px;
                                height: ${((key + 1) * size) / total}px;
                                border-color: #${Math.random().toString(16).substr(-6)};
                                transform: rotate(${(360 / total) * key}deg);
                `;
                papa.appendChild(ele);
        });
})();
</script>


JS在 400*400 的区域内生成了 60 个 span 标签，使用 CSS 定义的 .sons 选择器，并追加/覆盖 width、height、border-color 以及 transform 转换样式，里面涉及到一些计算。

效果放在下一楼。

马黑黑 发表于 2022-11-7 22:42

<style>
#papa {
        margin: auto;
        display: grid;
        place-items: center;
        width: 740px;
        height: 600px;
        position: relative;
}
.sons {
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 30%; /* 修改这里会得到不同的效果，比如记事本用的是：0 40% */
}
</style>

<div id="papa"></div>

<script>
(function () {
        let size = 400, total = 60;
        Array.from({ length: total }).forEach((ele, key) => {
                ele = document.createElement("span");
                ele.className = "sons";
                ele.style.cssText += `
                                width: ${((key + 1) * size) / total}px;
                                height: ${((key + 1) * size) / total}px;
                                border-color: #${Math.random().toString(16).substr(-6)};
                                transform: rotate(${(360 / total) * key}deg);
                `;
                papa.appendChild(ele);
        });
})();
</script>

马黑黑 发表于 2022-11-7 22:44

说是鸟巢，其实这不是普通的鸟巢，是水吧鸟巢{:4_190:}

小辣椒 发表于 2022-11-7 22:46

这个居然可以用代码编辑出来，难以想象了，CSS+JS的功能太强大了

马黑黑 发表于 2022-11-7 22:51

小辣椒 发表于 2022-11-7 22:46
这个居然可以用代码编辑出来，难以想象了，CSS+JS的功能太强大了

CSS定制结构和样式，JS生成所需的子元素、还能补充其样式

红影 发表于 2022-11-7 23:04

旋转出来的对称之美，黑黑创意无限{:4_199:}

相约爱晚亭 发表于 2022-11-8 07:37

创意无限，引领前行！{:5_116:}

马黑黑 发表于 2022-11-8 07:55

相约爱晚亭 发表于 2022-11-8 07:37
创意无限，引领前行！

言重了严重了，玩玩

小辣椒 发表于 2022-11-8 12:21

马黑黑 发表于 2022-11-7 22:51
CSS定制结构和样式，JS生成所需的子元素、还能补充其样式

估计这个要很熟练css和js的编程，小辣椒就纯跟黑黑玩套用了

马黑黑 发表于 2022-11-8 12:51

小辣椒 发表于 2022-11-8 12:21
估计这个要很熟练css和js的编程，小辣椒就纯跟黑黑玩套用了

一般熟悉就可以了

小辣椒 发表于 2022-11-8 12:53

马黑黑 发表于 2022-11-8 12:51
一般熟悉就可以了

跟着黑黑教程学习了

马黑黑 发表于 2022-11-8 13:09

小辣椒 发表于 2022-11-8 12:53
跟着黑黑教程学习了

有时间还是系统学学，我更多的不是介绍知识而是实现手法

小辣椒 发表于 2022-11-8 13:13

马黑黑 发表于 2022-11-8 13:09
有时间还是系统学学，我更多的不是介绍知识而是实现手法

前段时间我中午都上来看看，但夏季上班时间过了，我就中午没得上来了。

黑黑我得下了

晚上见！

马黑黑 发表于 2022-11-8 13:28

小辣椒 发表于 2022-11-8 13:13
前段时间我中午都上来看看，但夏季上班时间过了，我就中午没得上来了。

黑黑我得下了


88

查看完整版本: CSS+JS鸟巢