如何用纯 CSS 创作一只卡通鹦鹉
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/vrRmWy
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/c7adzTW
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 3 个子元素:
<div class="parrot"><div class="outer"></div><div class="middle"></div><div class="inner"></div>
</div>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: darkslategray;
}
定义容器尺寸:
.parrot {width: 10em;height: 10em;font-size: 30px;
}
画出鹦鹉头部的羽毛:
.parrot {position: relative;display: flex;align-items: center;justify-content: center;
}.parrot .outer {position: absolute;width: 100%;height: 100%;border: 1em solid;border-color: transparent transparent orangered tomato;border-radius: 50%;
}
画出鹦鹉的头部和喙的上半部分:
.parrot .middle {position: absolute;width: 80%;height: 80%;border: 4em solid;border-color: gold transparent gainsboro white;border-radius: 50%;
}
画出鹦鹉的喙的下半部分:
.parrot .inner {position: absolute;width: 40%;height: 40%;border: 2em solid;border-color: transparent orange transparent transparent;border-radius: 50%;
}
用伪元素画出鹦鹉的眼睛:
.parrot .inner::before {content: '';position: absolute;width: 1em;height: 1em;background-color: black;border-radius: 50%;left: -2em;top: -0.5em;
}
把画面转正:
.parrot > * {transform: rotate(45deg);
}
设置鼠标悬停效果,悬停时鹦鹉的头转向另一侧:
.parrot > * {transition: 0.5s;
}.parrot:hover .outer {transform: rotate(225deg);border-color: transparent transparent tomato orangered;
}.parrot:hover .middle {transform: rotate(calc(225deg - 360deg));border-color: transparent gold white gainsboro;
}.parrot:hover .inner {transform: rotate(135deg);
}
最后,修改悬停时鹦鹉的配色:
.parrot:hover .outer {border-color: transparent transparent lightseagreen darkcyan;
}.parrot:hover .middle {border-color: transparent gold white gainsboro;
}.parrot:hover .inner {border-color: transparent orange transparent transparent;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015339977
如何用纯 CSS 创作一只卡通鹦鹉相关推荐
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
- 73.纯 CSS 创作一只卡通狐狸
73.纯 CSS 创作一只卡通狐狸 原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6E ...
- 如何用纯 CSS 创作一只愤怒小鸟中的黑炮
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vaoQqa 可交互视频 ...
- 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一只愤怒小鸟中的绿猪
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 ...
- 如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 ...
- 如何用纯 CSS 创作一只单眼怪兽
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pZXzaY 可交互视频 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
最新文章
- 【建模必备】遗传算法的基本原理与步骤(编码/解码)
- velocity入门(三) 注释
- 马云携阿里17位创始人及合伙人捐赠浙大一院5.6亿,杭州渐成中国硅谷
- 《OKR源于英特尔和谷歌的目标管理利器》读书笔记
- 7-3 凸多边形最优三角剖分 (10 分)(思路+详解+分析题意+动态规划)Come Baby!!!!!!!!!
- 老铁,邀请你来免费学习人工智能!!!
- 使用NGINX作为HTTPS正向代理服务器
- h5引入json_Vue中如何使用本地Json文件?
- ❤️Java面试高频《注解与反射》(建议收藏)❤️
- Proteus与emu8086实现流水灯联调
- Java将多张图片合并保存到同一页PDF中
- Win10此设备不支持接收 Miracast 无法投影的解决方法
- wireshark数据包分析实战 读书笔记
- Python的初步了解
- excel表格内文字怎么换行_Excel | 单元格内换行与撤销换行的方法
- 【修复版】仿我爱看电影网站模板/海洋CMS影视系统模板
- 认证3A信用等级对企业有什么作用
- 计算机基础和综合实验,计算机基础与综合编程实验报告.doc
- 电脑开机无声音无图像的原因
- 网页设计后PSD时代(Post-PSD Era)