介绍 & lt; div类=癰rick"比;
& lt; div类=皊ides"祝辞
& lt;跨类=& # 39;前# 39;祝辞& lt;/span>
& lt;跨类=& # 39;对# 39;祝辞& lt;/span>
& lt;跨类=皌op"祝辞& lt;/span>
& lt;/div>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景:径向渐变(圈中心,白色,天蓝色);
} 。砖{
宽度:40 em;
高度:30 em;
字体大小:10 px;
} 。砖{
位置:相对;
}
.sides .front {
位置:绝对的;
宽度:9 em;
高度:6.8 em;
background - color: # 237定期监测;
上图:19 em;
左:7他们;
} 。双方在* {
位置:绝对的;
background - color: # 237定期监测;
}
.sides铃声{
宽度:18 em;
高度:6.8 em;
过滤器:亮度(0.8);
上图:19 em;
左:钙(em 7 + 9 em);
} 。直边上{
宽度:18 em;
高度:10.4 em;
过滤器:亮度(1.2);
上图:钙(em - 10.4 em 19日);
左:钙(em 7 + 9 em);
} 。双方.front {
transform-origin:正确;
变换:skewY(30度);
}
.sides铃声{
transform-origin:左;
变换:skewY(-30度);
}
直.sides上{
transform-origin:左底;
变换:旋转(-60度)skewY(30度);
} & lt; div类=癰rick"比;
& lt; div类=皊ides"祝辞
& lt;跨类=& # 39;前# 39;祝辞& lt;/span>
& lt;跨类=& # 39;对# 39;祝辞& lt;/span>
& lt;跨类=皌op"祝辞& lt;/span>
& lt;/div>
& lt; div类=皊tuds"祝辞
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt;/div>
& lt;/div> 。钉跨度:nth-child (1) {
——n: 1;
}
.studs跨度:nth-child (3) {
——n: 3;
}
.studs跨度:nth-child (5) {
——n: 5;
}
.studs跨度:nth-child (7) {
——n: 7;
}
.studs跨度:nth-child (2) {
——n: 2;
}
.studs跨度:nth-child (4) {
——n: 4;
}
.studs跨度:nth-child (6) {
——n: 6;
}
.studs跨度:nth-child (8) {
——n: 8;
} 。钉跨度:nth-child(奇数){
上图:钙(4.6 em + (var (- n) - 1)/2 * 2.6 em);
左:钙(23.3 em - (var (- n) - 1)/2 * 4.6 em);
} 。钉跨度:nth-child(甚至){
上图:钙(6.9 em + (var (- n) - 2)/2 * 2.6 em);
左:钙(27.9 em - (var (- n) - 2)/2 * 4.6 em);
} 。{前钉跨度::
内容:& # 39;& # 39;;
位置:绝对的;
宽度:继承;
高度:2 em;
background - color: # 4 cb7ff;
这个特性:50%;
}
使用纯CSS实现一块乐高积木的方法是什么?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
效果预览
代码解读
定义dom,容器中包含一组3个面:
居中显示:
定义容器尺寸:
画出积木的正面:
画出积木的右面:
画出积木的顶面:
把以上3个面组合成立方体:
接下来画积木的凸粒。
在dom中增加8个凸粒元素:
定义变量:
画出左侧的凸粒:
画出右侧的凸粒:
最后,画出凸粒的顶面:
感谢各位的阅读!看完上述内容,你们对使用纯CSS实现一块乐高积木的方法是什么大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
