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 可交互视频 ...
随机推荐
- C++实验五
#include <iostream> #include <vector> #include <string> using namespace std; // 函数 ...
- Java for-each循环解惑
Java for-each循环解惑 2014/04/24 | 分类: 技术之外 | 0 条评论 | 标签: JAVA 分享到:21 本文由 ImportNew - liqing 翻译自 javarev ...
- PyQt5 教程地址
https://maicss.gitbooks.io/pyqt5/content/介绍.htmlPyQt5{ QtCore { BasicTimer#定时器 } QtWidgets#窗口工具 { QA ...
- PY序
Python实现机器学习依赖于两个类库——SciPy和scikit-learn 一)SciPy SciPy是数学运算的基本类库,在机器学习的过程中,主要运用NumPy.Matplotlib和Panda ...
- 关于pycharm中缩进、粘贴复制等文本编辑功能部分失效的解决办法
有可能是同时安装了vim,冲突导致: 在seetings中点击Plugins,搜索vim卸载后功能恢复
- TCP/IP协议示意图
TCP/IP协议示意图
- 安装ns2.34,802.11p的各种包的时候遇到问题
安装教程:http://blog.sina.com.cn/s/blog_6735526a0102w1zs.html 802.11p补丁包:https://download.csdn.net/downl ...
- jumpserver管理入门
比较规范一点的步骤 1.先在用户管理查看用户组里,添加用户组 2.在用户管理查看用户里,添加用户 3.在资产管理里查看资产,添加资产.在批量增加那里可以使用表格快速导入添加 4.在授权管理里的系统用户 ...
- EasyMall注册功能
EasyMall注册功能 1. 环境搭建 创建一个EasyMall的web应用 配置www.easymall.com网站,并配置为缺省的虚拟主机,将EasyMall配 置为缺省的web应用,在配置in ...
- tomcat 发布后中文乱码问题
接口收到数据,使用Eclipse运行调试中文正常显示,发布到Tomcat后中文出现乱码情况: 解决方法: tomcat启动时默认使用系统编码,可更改tomcat bin目录下catalina.bat文 ...