如何使用纯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实现一块乐高积木”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！