原文地址:https://segmentfault.com/a/1190000015566332

学习效果地址:https://scrimba.com/c/cz6EzdSd

感想:过渡效果,圆角,定位。

HTML code:

<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>

CSS code:

html, body {
margin:;
padding:;
}
body{
/* 设置body的子元素水平垂直居中 */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* 定义一个背景变量 */
--bc: teal;
background-color: var(--bc);
}
/* 设置fox容器样式 */
.fox{
position: relative;
font-size: 30px;
width: 7em;
height: 9em;
border: 1px solid white;
/* 定义字体颜色变量 */
--c: chocolate;
color: var(--c);
/* 过渡时间 */
transition: 1s;
}
.fox:hover{
--c: lightblue;
}
.fox .head{
position: absolute;
right:;
width: 6em;
height: 6em;
border-radius: 50%;
background-color: currentColor;
}
/* 画出脸颊 */
.fox .faces::before,
.fox .faces::after{
position: absolute;
top: 3em;
content:'';
width: 3em;
height: 3em;
border-radius: 0 100% 0 100%;
background-color: white;
}
.fox .faces::after {
right:;
transform: rotate(-90deg);
}
/* 画出眼睛 */
.fox .eyes::before,
.fox .eyes::after{
position: absolute;
top: 4.5em;
content: '';
border: 0.3em solid;
border-color: black black transparent transparent;
border-radius: 50%;
}
.fox .eyes::before {
left: 1em;
}
.fox .eyes::after {
right: 1em;
transform: rotate(-90deg);
}
/* 画出耳朵 */
.fox .ears::before,
.fox .ears::after {
position: absolute;
content:'';
width: 3em;
height: 3em;
background-color: currentColor;
filter: brightness(1.25);
border-radius: 0 100% 0 0;
z-index: -1;
}
.fox .ears::after {
right:;
transform: rotate(-90deg);
}
/* 画出鼻子 */
.fox .nose{
position: absolute;
top: calc(6em - 1em / 2);
right: calc((6em - 1em) / 2);
width: 1em;
height: 1em;
border-radius: 50%;
background-color: black;
transform: scale(0.9);
}
/* 画出尾巴 */
.fox .tail{
position: absolute;
bottom:;
width: 7em;
height: 7em;
border-radius: 50%;
background-color: currentColor;
z-index: -1;
overflow: hidden;
}
/* 去掉尾巴左上角的扇形 */
.fox .tail::before{
position: absolute;
content:'';
width: calc(7em / 2);
height: calc(7em / 2);
border-radius: 100% 0 0 0;
background-color: var(--bc);
}
/* 尾巴尖 */
.fox .tail::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
border-radius: 0 0 100% 0;
background: white;
bottom: calc(7em / 2 - 1em);
}

73.纯 CSS 创作一只卡通狐狸的更多相关文章

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

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

  2. 58.纯 CSS 创作一只卡通鹦鹉

    原文地址:https://segmentfault.com/a/1190000015339977 优化后效果地址:https://scrimba.com/c/c97Z2vuD 感想:消除了图片外的:h ...

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

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

  4. 70.纯 CSS 创作一只徘徊的果冻怪兽

    原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...

  5. 62.纯 CSS 创作一只蒸锅(感觉不好看呀)

    原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...

  6. 61.纯 CSS 创作一只咖啡壶(这个不好看)

    原文地址:https://segmentfault.com/a/1190000015376202 感想: 好像不像呀,啊啊啊.伪元素.定位.动画.width和height包括内边距|边框|内容区. H ...

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

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

  8. 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子

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

  9. 如何用纯 CSS 创作一只徘徊的果冻怪兽

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

随机推荐

  1. Qt学习3---子窗口与父窗口

    创建子窗口后,主窗口的头文件需要  #include "子窗口头文件" 子窗口和父窗口之间相互切换 子窗口没有办法处理父窗口,子窗口此时就需要一个信号: * 信号必须有signal ...

  2. Filter用户例子

    用Filter防止用户访问一些未被授权的资源,比如一个用户未登录就不允许访问网站的某些页面,并将页面重定向到需要用户登录的页面,下面是一个相关的例子: package com.drp.util.fil ...

  3. Arch Linux 硬盘引导-联网安装

    Arch Linux 硬盘引导-联网安装 ============https://www.archlinux.org/https://wiki.archlinux.org/https://wiki.a ...

  4. 《DSP using MATLAB》Problem 7.27

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  5. 第3章 Data语意学

    在C++中经常会遇到一个类的大小问题,关于一个类的大小一般受到三个方面的影响. 语言本身所造成的额外负担,如在虚拟继承中会遇到如派生类中会包含一个指针指向base class subobjec,这样会 ...

  6. NFPA, UL

    Who or what is NFPA? NFPA (National Fire Protection Association) is an organization in the USA that ...

  7. HBASE 基础命令总结

    HBASE基础命令总结 一,概述 本文中介绍了hbase的基础命令,作者既有记录总结hbase基础命令的目的还有本着分享的精神,和广大读者一起进步.本文的hbase版本是:HBase 1.2.0-cd ...

  8. js获取时间戳的三种方法

    1.Date.Now() 2.new Date().getTime() 3.Date.parse(new Date()) 其中1和2是相同含义 chrome控制台键入:Date.now() ===ne ...

  9. Python 入门级报错处理

    问题1:Missing parentheses in call to 'print' 原因:因为Python2.X和Python3.X不兼容.我安装的是Python3.X,但是我试图运行的却是Pyth ...

  10. linux 线程同步

    参考链接:https://blog.csdn.net/daaikuaichuan/article/details/82950711#font_size5font_2 一,互斥锁 #include &l ...