73.纯 CSS 创作一只卡通狐狸
原文地址: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 创作一只卡通狐狸的更多相关文章
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
- 58.纯 CSS 创作一只卡通鹦鹉
原文地址:https://segmentfault.com/a/1190000015339977 优化后效果地址:https://scrimba.com/c/c97Z2vuD 感想:消除了图片外的:h ...
- 前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...
- 70.纯 CSS 创作一只徘徊的果冻怪兽
原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...
- 62.纯 CSS 创作一只蒸锅(感觉不好看呀)
原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...
- 61.纯 CSS 创作一只咖啡壶(这个不好看)
原文地址:https://segmentfault.com/a/1190000015376202 感想: 好像不像呀,啊啊啊.伪元素.定位.动画.width和height包括内边距|边框|内容区. H ...
- 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...
- 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 ...
随机推荐
- Qt学习3---子窗口与父窗口
创建子窗口后,主窗口的头文件需要 #include "子窗口头文件" 子窗口和父窗口之间相互切换 子窗口没有办法处理父窗口,子窗口此时就需要一个信号: * 信号必须有signal ...
- Filter用户例子
用Filter防止用户访问一些未被授权的资源,比如一个用户未登录就不允许访问网站的某些页面,并将页面重定向到需要用户登录的页面,下面是一个相关的例子: package com.drp.util.fil ...
- Arch Linux 硬盘引导-联网安装
Arch Linux 硬盘引导-联网安装 ============https://www.archlinux.org/https://wiki.archlinux.org/https://wiki.a ...
- 《DSP using MATLAB》Problem 7.27
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- 第3章 Data语意学
在C++中经常会遇到一个类的大小问题,关于一个类的大小一般受到三个方面的影响. 语言本身所造成的额外负担,如在虚拟继承中会遇到如派生类中会包含一个指针指向base class subobjec,这样会 ...
- NFPA, UL
Who or what is NFPA? NFPA (National Fire Protection Association) is an organization in the USA that ...
- HBASE 基础命令总结
HBASE基础命令总结 一,概述 本文中介绍了hbase的基础命令,作者既有记录总结hbase基础命令的目的还有本着分享的精神,和广大读者一起进步.本文的hbase版本是:HBase 1.2.0-cd ...
- js获取时间戳的三种方法
1.Date.Now() 2.new Date().getTime() 3.Date.parse(new Date()) 其中1和2是相同含义 chrome控制台键入:Date.now() ===ne ...
- Python 入门级报错处理
问题1:Missing parentheses in call to 'print' 原因:因为Python2.X和Python3.X不兼容.我安装的是Python3.X,但是我试图运行的却是Pyth ...
- linux 线程同步
参考链接:https://blog.csdn.net/daaikuaichuan/article/details/82950711#font_size5font_2 一,互斥锁 #include &l ...