如何使用纯CSS实现一块乐高积木
这篇文章主要为大家展示了“如何使用纯CSS实现一块乐高积木”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用纯CSS实现一块乐高积木”这篇文章吧。
代码解读
定义dom，容器中包含一组3个面：
<divclass="brick">
<divclass="sides">
<spanclass='front'></span>
<spanclass='right'></span>
<spanclass="top"></span>
</div>
</div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(circleatcenter,white,skyblue);
}
定义容器尺寸：
.brick{
width:40em;
height:30em;
font-size:10px;
}
画出积木的正面：
.brick{
position:relative;
}
.sides.front{
position:absolute;
width:9em;
height:6.8em;
background-color:#237fbd;
top:19em;
left:7em;
}
画出积木的右面：
.sides>*{
position:absolute;
background-color:#237fbd;
}
.sides.right{
width:18em;
height:6.8em;
filter:brightness(0.8);
top:19em;
left:calc(7em+9em);
}
画出积木的顶面：
.sides.top{
width:18em;
height:10.4em;
filter:brightness(1.2);
top:calc(19em-10.4em);
left:calc(7em+9em);
}
把以上3个面组合成立方体：
.sides.front{
transform-origin:right;
transform:skewY(30deg);
}
.sides.right{
transform-origin:left;
transform:skewY(-30deg);
}
.sides.top{
transform-origin:leftbottom;
transform:rotate(-60deg)skewY(30deg);
}
接下来画积木的凸粒。
在dom中增加8个凸粒元素：
<divclass="brick">
<divclass="sides">
<spanclass='front'></span>
<spanclass='right'></span>
<spanclass="top"></span>
</div>
<divclass="studs">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
定义变量：
.studsspan:nth-child(1){
--n:1;
}
.studsspan:nth-child(3){
--n:3;
}
.studsspan:nth-child(5){
--n:5;
}
.studsspan:nth-child(7){
--n:7;
}
.studsspan:nth-child(2){
--n:2;
}
.studsspan:nth-child(4){
--n:4;
}
.studsspan:nth-child(6){
--n:6;
}
.studsspan:nth-child(8){
--n:8;
}
画出左侧的凸粒：
.studsspan:nth-child(odd){
top:calc(4.6em+(var(--n)-1)/2*2.6em);
left:calc(23.3em-(var(--n)-1)/2*4.6em);
}
画出右侧的凸粒：
.studsspan:nth-child(even){
top:calc(6.9em+(var(--n)-2)/2*2.6em);
left:calc(27.9em-(var(--n)-2)/2*4.6em);
}
最后，画出凸粒的顶面：
.studsspan::before{
content:'';
position:absolute;
width:inherit;
height:2em;
background-color:#4cb7ff;
border-radius:50%;
}
以上是“如何使用纯CSS实现一块乐高积木”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
