前端每日实战：73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
https://codepen.io/comehope/pen/OEKZed
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cvEm3uq
源代码下载
每日前端实战系列的全部源代码请从 github 下载：
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含 2 个元素，即头和尾巴，<head> 再包含 4 个元素，表示脸颊、眼睛、耳朵和鼻子。
<div class="fox">
<div class="head">
<span class="faces"></span>
<span class="eyes"></span>
<span class="ears"></span>
<span class="nose"></span>
</div>
<div class="tail"></div>
</div>居中显示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
--bc: teal;
background-color: var(--bc);
}定义容器尺寸：
.fox {
width: 7em;
height: 9em;
font-size: 30px;
}画出圆形的头部轮廓：
.fox {
--c: chocolate;
position: relative;
color: var(--c);
}
.fox .head {
position: absolute;
width: 6em;
height: 6em;
background-color: currentColor;
border-radius: 50%;
right: 0;
}画出叶片形的脸颊：
.fox .faces::before,
.fox .faces::after {
content: '';
position: absolute;
width: 3em;
height: 3em;
background-color: white;
border-radius: 0 100% 0 100%;
top: 3em;
}
.fox .faces::after {
right: 0;
transform: rotate(-90deg);
}画出半圆形的眼睛：
.fox .eyes::before,
.fox .eyes::after {
content: '';
position: absolute;
border: 0.3em solid;
border-color: black black transparent transparent;
border-radius: 50%;
top: 4.5em;
}
.fox .eyes::before {
left: 1em;
}
.fox .eyes::after {
right: 1em;
transform: rotate(-90deg);
}画出扇形的耳朵：
.fox .ears::before,
.fox .ears::after {
width: 3em;
height: 3em;
background-color: currentColor;
filter: brightness(1.25);
border-radius: 0 100% 0 0;
z-index: -1;
}
.fox .ears::after {
right: 0;
transform: rotate(-90deg);
}画出圆形的鼻子：
.fox .nose{
position: absolute;
width: 1em;
height: 1em;
background-color: black;
border-radius: 50%;
top: calc(6em - 1em / 2);
right: calc((6em - 1em) / 2);
transform: scale(0.9);
}画出圆形的尾巴：
.fox .tail{
width: 7em;
height: 7em;
background-color: currentColor;
border-radius: 50%;
position: absolute;
z-index: -1;
bottom: 0;
}去掉尾巴左上角的扇形：
.fox .tail::before {
content: '';
position: absolute;
width: calc(7em / 2);
height: calc(7em / 2);
background-color: var(--bc);
border-radius: 100% 0 0 0;
}画出扇形的尾巴尖：
.fox .tail{
overflow: hidden;
}
.fox .tail::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
border-radius: 0 0 100% 0;
background: white;
bottom: calc(7em / 2 - 1em);
}最后，增加鼠标悬停效果：
.fox {
transition: 1s;
}
.fox:hover {
--c: lightblue;
}大功告成！
前端每日实战：73# 视频演示如何用纯 CSS 创作一只卡通狐狸的更多相关文章
- 前端每日实战：58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...
- 前端每日实战：98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...
- 前端每日实战：124# 视频演示如何用纯 CSS 创作一只纸鹤
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可 ...
- 前端每日实战：103# 视频演示如何用纯 CSS 创作一只监视眼
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...
- 前端每日实战：132# 视频演示如何用纯 CSS 创作一只思考的手
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是 ...
- 前端每日实战：111# 视频演示如何用纯 CSS 创作一只艺术的鸭子
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可 ...
- 前端每日实战：70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...
- 前端每日实战：61# 视频演示如何用纯 CSS 创作一只咖啡壶
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZRjGGy 可交互视频 此视频是可 ...
- 前端每日实战：62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
随机推荐
- DZY Loves Chemistry
DZY Loves Chemistry time limit per test 1 second memory limit per test 256 megabytes input standard ...
- [CSP-S模拟测试]:大新闻（主席树）
题目传送门(内部题20) 输入格式 第一行为两个数$n,m$,意义如题所述.接下来一行$n$个数,代表一开始$n$条大新闻的$naive$值.接下来$m$行,每行一个操作,输入格式如下:读入$1$,代 ...
- lua实现简单
MessageManager.lua local messageManager = {mEventTable = {},mEventUserData = {}} --注册事件function mess ...
- 使用mysql应该注意的细节
一.表及字段的命名规范 1.可读性原则 使用大写和小写来格式化的库对象名字以获得良好的可读性. 例如:使用CustAdress而不是custaddress来提高可读性.(这里注意有些DBMS系统对表名 ...
- HDU-4475 Downward paths（找规律）
Downward paths Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- wsl中加载git之后，发现文件是修改状态
查看git status,发现所有文件都被修改. git diff文件查看,发现是行尾的问题导致的. https://github.com/Microsoft/WSL/issues/184 在wsl里 ...
- jmeter_使用命令行运行
使用非GUI模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源. Windows下以命令行模式运行的方法: 1.命令介绍 jmeter -n -t <testfile f ...
- java对象实例化 静态块，对象块，构造函数执行顺序
public class TestA { public static void main(String []args) { new B(); } } class A { static { System ...
- python-javascript之bom
BOM BOM介绍 全称 Browser Object Mode 浏览器对象模式 操作浏览器的API接口.比如浏览器自动滚动 Windows对象的顶层部分是BOM的顶层(核心)对象,所有的对象都是通过 ...
- Oracle学习笔记<5>
组函数(多值函数) 数据库中函数的分类:1)单值函数 Single Rows Functions 特点:n条数据参与函数处理,最终得到n条结果.2)多值函数(组函数) Multiple Rows Fu ...