CSS+JS鸟巢

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

请马上登录，朋友们都在花潮里等着你哦：）

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

x

《记事本》里压在笔记本上面的东东，最先是用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 转换样式，里面涉及到一些计算。

效果放在下一楼。