前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/qKKqrv
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cWm3Vub
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
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%;
}
大功告成!
前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木相关推荐
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 前端每日实战:94# 视频演示如何用纯 CSS 创作一台拍立得照相机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 前端每日实战:100# 视频演示如何用纯 CSS 创作闪闪发光的霓虹灯文字
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBwvxw 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
最新文章
- 分享Kali Linux 2017年第11周镜像文件
- Flume(NG)架构设计要点及配置实践
- 三星又推出新工具啦!Gear VR 可以兼容多个视频
- 在ASP.NET MVC中使用IIS级别的URL Rewrite
- Android开源框架——事件总线otto
- Page Cache的落地问题
- Android多线程之IntentService源码解析
- Java文件编码格式转换
- Elasticsearch之sense插件的安装(图文详解)
- 这些书你读过一多半,你就是编程大牛!
- 鸡兔同笼html语言,鸡兔同笼有哪五种方法
- 《人生十论》. 钱穆
- Excel在指定范围内匹配/查找文本(MATCH)
- android面试题分析总结
- 淘宝直通车如何打造爆款,直通车爆款秘籍
- 跨平台APP----对Cordova,APPCan,DCloud,APICloud四大平台的分析(系列二)
- 匿名上位机v2.6和V7自定义帧代码和飞控姿态代码
- python微控制器编程pdf_Python高性能编程 中文高清pdf完整版[17MB]
- 我的世界服务器等级系统,[娱乐][角色][聊天][上古之石]LevelSignPlus——服务器等级声望系统[1.7.2-1.10.2]...
- Java实现中国象棋(联机版)
热门文章
- java 与 |与||的区别
- Android 高级自定义View实战
- oracle 使用netca报错
- URAL 1353 Milliard Vasya's Function DP
- Web中的积累:外观模式 Facade
- [Head First设计模式]山西面馆中的设计模式——观察者模式
- 配置OSPF时需要注意的几点
- php元素浮动会产生哪些影响,元素浮动的影响与三列布局的实现原理——2019年9月4日22时30分...
- Linux Kernel TCP/IP Stack — 协议栈发包处理流程
- Service Mesh — Istio