效果预览

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

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);
}

大功告成!

前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子的更多相关文章

  1. 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪

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

  2. 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤

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

  3. 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼

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

  4. 前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉

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

  5. 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸

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

  6. 前端每日实战:132# 视频演示如何用纯 CSS 创作一只思考的手

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

  7. 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

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

  8. 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶

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

  9. 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅

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

随机推荐

  1. iTOP4412开发板-使用buildroot搭建最简单的linux

    本文档介绍的是使用buildroot搭建最简单的linux文件系统,Buildroot是Linux平台上一个构建嵌入式Linux系统的框架.整个Buildroot是由Makefile脚本和Kconfi ...

  2. 三、linux-mysql mysql的多实例

    1.什么是mysql多实例 一个机器开通多个端口,运行多个mysql服务器进程,这些服务进程通过不同的socket监听不同的服务端口提供各自的服务,但它们共用一台mysql安装程序,使用不同的my.c ...

  3. Image.FromStream(ms) 提示参数无效

    说明ms有问题,首先确保有读到数据,这种情况是保存到库的时候出错的. 原来你可能是这样写的: MemoryStream stream = new MemoryStream();PictureBox1. ...

  4. LootCode-链表排序-Java

    链表排序 0.来源 来源:力扣(LeetCode) 题目链接:https://leetcode-cn.com/problems/sort-list 1.题目描述 在 O(n log n) 时间复杂度和 ...

  5. TZOJ-STL系列题

    C++实验:STL之vector #include <bits/stdc++.h> using namespace std; void Input(vector<int>&am ...

  6. mysql数据库-基础--长期维护

    ###############    数据库    ############## 主要是通过这个学习到什么? 1,库的操作 2,表的操作,包括查询,多表查询,子查询 3,视图,事务,索引,锁, ### ...

  7. 蓝桥杯-PREV45-图形排版

    这是2017年蓝桥杯C组C++的压轴题,拿到之后没什么想法.但是蓝桥杯有部分分.所以直接敲了个大暴力提交上去过了一半的数据.后来想到了DP,但是没能实现出来,感觉还是有问题的.后来看了解题视频发现是预 ...

  8. deeplearning.ai 神经网络和深度学习 week3 浅层神经网络

    1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...

  9. [LC] 169. Majority Element

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  10. 吴裕雄--天生自然 PYTHON语言数据分析:ESA的火星快车操作数据集分析

    import os import numpy as np import pandas as pd from datetime import datetime import matplotlib imp ...