前端每日实战：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 创作一只卡通狐狸相关推荐

前端每日实战：62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频此视频是可 ...
73.纯 CSS 创作一只卡通狐狸
73.纯 CSS 创作一只卡通狐狸原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6E ...
前端每日实战：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 可交互视频此视频是可 ...
前端每日实战：60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频此视频是可 ...
前端每日实战：140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频此视频是可 ...
前端每日实战：34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程此视频 ...
前端每日实战：151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频此视频是可 ...