效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/aaoveW
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/c3q28tB
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 4 个元素:
<figure class="duck">
<span></span>
<span></span>
<span></span>
<span></span>
</figure>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: papayawhip;
}
定义容器尺寸:
.duck {
width: 10em;
height: 10em;
}
用 grid 把 4 个方块按 2*2 布局:
.duck {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.duck span {
background-color: seagreen;
}
把容器旋转 45 度:
.duck {
transform: rotate(-45deg);
}
设置每个正方形的圆角,组合成一只鸭子的抽象形状:
.duck span:nth-child(1) {
border-top-left-radius: 100%;
}
.duck span:nth-child(2) {
border-top-right-radius: 100%;
}
.duck span:nth-child(3) {
border-bottom-right-radius: 100%;
}
.duck span:nth-child(4) {
border-bottom-left-radius: 100%;
}
为最后一个方块设置有差异的颜色,使它看起来像鸭子嘴:
.duck span:nth-child(4) {
background-color: coral;
}
在第 2 个方块用径向渐变画出一个圆点,代表鸭子的眼睛:
.duck span:nth-child(2) {
background-image: radial-gradient(black 0.5em, transparent 0.5em);
}
大功告成!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。