效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/mGZbmQ

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cWMPaha

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

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

代码解读

定义 dom,容器表示邮票:

<div class="stamp">
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: teal;
}

设置容器尺寸:

.stamp {
position: relative;
width: 57em;
height: 71em;
font-size: 5px;
padding: 5em;
background-color: white;
}

用重复背景绘制出邮票的齿孔:

.stamp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} .stamp::after,
.stamp::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background:
radial-gradient(circle, teal 50%, transparent 50%),
radial-gradient(circle, teal 50%, transparent 50%);
background-size: 3.5em 3.5em;
} .stamp::before {
top: 1.5em;
background-repeat: repeat-y;
background-position: -3% 0, 103% 0;
} .stamp::after {
left: 1.5em;
background-repeat: repeat-x;
background-position: 0 -2.5%, 0 102.5%;
}

在 html 文件中增加小鸡的 dom 元素,子元素分别表示头部、喙、身体、尾巴、腿、爪子、太阳、桔子:

<div class="stamp">
<div class="rooster">
<span class="head"></span>
<span class="beak"></span>
<span class="body"></span>
<span class="tail"></span>
<span class="leg"></span>
<span class="foot"></span>
<span class="sun"></span>
<span class="orange-stuff"></span>
</div>
</div>

设置 grid 布局的行列尺寸:

.rooster {
display: grid;
grid-template-columns: 22.5em 13em 1.75em 14.5em 4.5em;
grid-template-rows: 12.5em 14.5em 15em 8em 5.5em;
background-color: wheat;
padding: 2em;
margin-top: -2em;
}

画出扇形的头部:

.head {
grid-column: 4;
grid-row: 2;
background-color: burlywood;
border-top-left-radius: 100%;
}

画出小鸡的眼睛和脸上的红晕:

.head {
position: relative;
} .head::after {
content: '';
position: absolute;
width: 2.8em;
height: 2.8em;
border-radius: 50%;
background-color: black;
right: 30%;
box-shadow: 2em 4em 4em rgba(255, 100, 0, 0.5);
}

画出扇形的喙:

.beak {
grid-column: 5;
grid-row: 2;
height: 4.5em;
background-color: darkorange;
border-bottom-right-radius: 100%;
}

画出半圆形的身体:

.body {
grid-column: 2 / 5;
grid-row: 3;
width: 30em;
background-color: saddlebrown;
border-radius: 0 0 15em 15em;
}

用伪元素,通过阴影画出翅膀:

.body {
position: relative;
overflow: hidden;
} .body::after {
content: '';
position: absolute;
width: 20em;
height: 10em;
border-radius: inherit;
box-shadow: 4em 2em 4em rgba(0, 0, 0, 0.3);
left: calc((30em - 20em) / 2);
}

画出扇形的尾巴:

.tail {
grid-column: 1;
grid-row: 1 / 3;
height: 22.5em;
background-color: burlywood;
align-self: end;
border-top-left-radius: 100%;
}

画出扇形的腿:

.leg {
grid-column: 4;
grid-row: 4;
width: 8em;
background-color: burlywood;
border-bottom-right-radius: 100%;
}

画出扇形的小爪子:

.foot {
grid-column: 4;
grid-row: 5;
width: 5.5em;
background-color: darkorange;
border-top-right-radius: 100%;
}

画出半圆形的太阳:

.sun {
grid-column: 3 / 5;
grid-row: 1;
width: 17em;
--h: calc(17em / 2);
height: var(--h);
background-color: darkorange;
border-radius: 0 0 var(--h) var(--h);
}

画出圆形的桔子和半圆形的叶片,注意此处叶片的画法与前面画半圆形的画法不同:

.orange-stuff {
grid-column: 1;
grid-row: 3 / 6;
width: 16em;
height: 16em;
background-color: darkorange;
align-self: end;
justify-self: end;
border-radius: 50%;
position: relative;
} .orange-stuff::before {
content: '';
position: absolute;
width: 8em;
height: 8em;
background: linear-gradient(45deg, transparent 50%, saddlebrown 50%);
border-radius: 50%;
top: -6.8em;
left: 10%;
}

在 dom 中再增加一些文本,包括标题、作者和面值:

<div class="stamp">
<div class="puppy">
<!-- 略 -->
</div>
<p class="text">
<span class="title">Rooster</span>
<span class="author">comehope</span>
<span class="face-value">120</span>
</p>
</div>

设置标题的文字样式:

.text {
position: relative;
width: calc(100% + 2em * 2);
height: 6em;
font-family: sans-serif;
} .text .title {
position: absolute;
font-size: 6em;
font-weight: bold;
color: brown;
}

设置作者的文字样式:

.text .author {
position: absolute;
font-size: 3em;
bottom: -1.2em;
color: dimgray;
}

设置面值的文字样式:

.text .face-value {
position: absolute;
font-size: 14em;
right: 0;
line-height: 0.9em;
color: darkcyan;
}

大功告成!

前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票的更多相关文章

  1. 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...

  2. 前端每日实战:116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...

  3. 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eLMKJG 可交互视频 此视频是可 ...

  4. 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...

  5. 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJrOqd 可交互视频 此视频是可 ...

  6. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...

  8. 前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

  9. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

随机推荐

  1. Java——ArrayList使用Demo

    三种遍历方式 通过迭代器Iterator遍历 通过get(索引值)遍历 for循环遍历 ArrayList使用Demo package list; import java.util.ArrayList ...

  2. Eclipse连接SQL Server 2008数据库

    一.准备材料 要能够使用数据库就要有相应的JDBC,所以我们要去Microsoft官网下载 https://www.microsoft.com/zh-cn/download/details.aspx? ...

  3. 小白学Python——Matplotlib 学习(3) 函数图形

    import matplotlib.pyplot as plt import numpy as np x = np.linspace(-1,1,50) y = 2*x + 1 plt.figure() ...

  4. redis的线程模型 与 压力测试

    当客户端与ServerSocket产生连接时,会产生一个 AE_REABLE / AE_WRITABL 事件, 多个Socket可能并发产生不同的事件,IO多路复用程序会监听这些Socket,按照顺序 ...

  5. C# 静态方法 静态属性 调用静态方法

    C#的类中可以包含两种方法:静态方法和非静态方法. 使用了static 修饰符的方法为静态方法,反之则是非静态方法. 静态方法是一种 特殊的成员方法,它不属于类的某一个具体的实例,而是属于类本身.所以 ...

  6. python之路之——操作系统的发展历史

    阅读目录 手工操作 —— 穿孔卡片 批处理 —— 磁带存储和批处理系统 多道程序系统 分时系统 实时系统 通用操作系统 操作系统的进一步发展 操作系统的作用 手工操作 —— 穿孔卡片 1946年第一台 ...

  7. SPSS Statistics 多个版本的下载安装激活步骤

    SPSS 23:https://www.cnblogs.com/coco56/p/11648386.html SPSS25:https://www.cnblogs.com/coco56/p/11648 ...

  8. C# List<Object>值拷贝

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Run ...

  9. fpga ip

    原文地址:altera FIR ip核 license破解作者:王永刚Aether 在证书文件中添加一段: FEATURE 6AF7_0012 alterad 2035.12 permanent un ...

  10. uwsgi支持http长链接

    http1.1支持长链接,而http1.0不支持,所以,在切换http版本号或者升级服务端版本时候,尤其要注意这个造成的影响. 当客户端以http1.1长链接方式连接服务端时,服务端如果不支持1.1, ...