前端每日实战：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 可交互视频 此视频是可 ...
随机推荐
- 转载：eclipse中web项目小地球没了
转载自:{FROM:http://www.cnblogs.com/zhouyalei/archive/2013/01/30/2882651.html} MyEclipse下创建的项目 导入eclips ...
- LintCode之各位相加
题目描述: 我的代码 public class Solution { /* * @param num: a non-negative integer * @return: one digit */ p ...
- centos7下zookeeper安装配置
1.下载zookeeper文件 cd /opt/ wget http://mirrors.hust.edu.cn/apache/zookeeper/stable/zookeeper-3.4.9.tar ...
- Linux操作系统(三)_部署JDK
一.通过tar.gz压缩包安装 1.在usr目录下创建java目录 cd usr mkdir java 2.用rz命令上传tar.gz安装包到java目录 3.解压tar.gz安装包到当前目录 tar ...
- 12. Jmeter-断言
jmeter-断言介绍与使用 性能测试中较少用到断言.断言会增加脚本执行时间,但是接口测试中断言是必备的.什么是断言?其实就是功能测试中常说的预期结果和实际结果是否相等. 响应断言 JSON Asse ...
- GET和POST的数据传递到底有何区别？
1. GET和POST与数据如何传递没有关系 GET和POST是由HTTP协议定义的.在HTTP协议中,Method和Data(URL, Body, Header)是正交的两个概念,也就是说,使用哪个 ...
- python 装饰器 第七步：带有参数的装饰器
#第七步:带有参数的装饰器 #两个基本函数用同一个装饰器装饰 def outer(arg): print(arg) #这是装饰器的代码 def kuozhan(func): print(func) # ...
- maven（二），Linux安装maven3.5.3及配置
Linux系统,ubuntu-16.04.4,安装maven3.5.3 一.创建文件夹 注意Linux用户,这个如果不是root用户,命令前面需要加:sudo //创建一个目录 mkdir /usr/ ...
- Cocos2d 之FlyBird开发---GameData类
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 现在是大数据的时代,绝大多数的游戏也都离不开游戏数据的控制,简单的就是一般记录游戏的得分情况,高端大气上档次一点的就是记录和保存各方面的游 ...
- VUE mixins（混入）
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...