前端每日实战：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 可交互视频 此视频是可 ...
随机推荐
- Android实战技巧：Dialog （转）
转:http://blog.csdn.net/hitlion2008/article/details/7567549#t0 Dialog是任何系统都必须有的一个控件,作为辅助窗口,用于显示一些消息,或 ...
- php面试专题---5、流程控制考点
php面试专题---5.流程控制考点 一.总结 一句话总结: 看代码不要先看函数里面的内容,要用的时候再去看:注意静态,注意变量作用域,php中的内置函数需要去归类总结,就是太容易忘记了 1.写出如下 ...
- anti-nim 游戏
游戏描述: 桌上有n堆石子,游戏双方轮流取石子,每次只能从一堆中取出任意数目的石子,不能不取,取走最后一个石子者失败. 结论: 先手必胜,当且仅当: ①.所有堆的石子数都为1,且游戏的SG值为0. ② ...
- 12. I2C-EEPROM
12.1. I2C 协议简介 I 2 C ( Inter-Integrated Circuit )协议是由 Phiilps 公司开发的,由于它具引脚少,硬件实现简单,可扩展性强,不需要如 USART. ...
- "New page after" by code
Hi. There is a method for starting of the new page in the EngineV2: Engine.NewPage(); You can call i ...
- appium常见问题06_如何解决uiaotomator定位工具报错
在使用uiaotomator工具定位元素过程中,经常会弹出报错,截图失败,导致无法定位元素,当遇到该问题时,解决办法如下: 方法一:拔掉手机usb连接,重新连接手机 方法二:adb杀掉手机服务,重起服 ...
- js 使用技巧
一,获取客户端状态 1.获取cookie function cookieInfo() { setcookie('cookie_test','1'); var cookie_test = getcook ...
- maven（二），Linux安装maven3.5.3及配置
Linux系统,ubuntu-16.04.4,安装maven3.5.3 一.创建文件夹 注意Linux用户,这个如果不是root用户,命令前面需要加:sudo //创建一个目录 mkdir /usr/ ...
- vue 中 element-ui 引入方式
目录 前言 全部引用 单个引用 前言 有时候只会使用到 Element-ui 的部分功能,为了减少文件体积建议使用分开引用,即只引用使用的功能. 注意:在main.js中使用部分引用的时候是 impo ...
- Java常用的几个Json库，性能强势对比！
作者:飞污熊 https://xncoding.com/2018/01/09/java/jsons.html 本篇通过JMH来测试一下Java中几种常见的JSON解析库的性能.每次都在网上看到别人说什 ...