如何使用純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實現一塊樂高積木”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！