如何使用纯CSS实现一块乐高积木(附源码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于php在web服务器上的运行模式详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

如何使用纯CSS实现一块乐高积木(附源码)

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含一组 3 个面:

<div class="brick">     <div class="sides">         <span class='front'></span>         <span class='right'></span>         <span class="top"></span>     </div> </div>

居中显示:

body {     margin: 0;     height: 100vh;     display: flex;     align-items: center;     justify-content: center;     background: radial-gradient(circle at center, 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: left bottom;     transform: rotate(-60deg) skewY(30deg); }

接下来画积木的凸粒。

在 dom 中增加 8 个凸粒元素:

<div class="brick">     <div class="sides">         <span class='front'></span>         <span class='right'></span>         <span class="top"></span>     </div>     <div class="studs">         <span></span>         <span></span>         <span></span>         <span></span>         <span></span>         <span></span>         <span></span>         <span></span>     </div> </div>

定义变量:

.studs span:nth-child(1) {     --n: 1; }  .studs span:nth-child(3) {     --n: 3; }  .studs span:nth-child(5) {     --n: 5; }  .studs span:nth-child(7) {     --n: 7; }  .studs span:nth-child(2) {     --n: 2; }  .studs span:nth-child(4) {     --n: 4; }  .studs span:nth-child(6) {     --n: 6; }  .studs span:nth-child(8) {     --n: 8; }

画出左侧的凸粒:

.studs span:nth-child(odd) {     top: calc(4.6em + (var(--n) - 1) / 2 * 2.6em);     left: calc(23.3em - (var(--n) - 1) / 2 * 4.6em); }

画出右侧的凸粒:

.studs span:nth-child(even) {     top: calc(6.9em + (var(--n) - 2) / 2 * 2.6em);     left: calc(27.9em - (var(--n) - 2) / 2 * 4.6em); }

最后,画出凸粒的顶面:

.studs span::before {     content: '';     position: absolute;     width: inherit;     height: 2em;     background-color: #4cb7ff;     border-radius: 50%; }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何使用纯CSS实现一块乐高积木(附源码)

发表评论

提供最优质的资源集合

立即查看 了解详情