前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉
2024-08-28 13:17:00
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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;
}
大功告成!
最新文章
- 多线程的通信和同步(Java并发编程的艺术--笔记)
- centos 6 YUM安装 lmp
- simpson
- java制作验证码
- day1
- JAVA设计模式 之 策略模式
- FFmpeg与libx264 x264接口源代码简单分析
- 十佳AngularJS框架
- POJ-1002 解题报告
- Matlab删除NaN数据
- IBM AIX Shell编写遭遇错误一2
- PHP. 03 .ajax传输XML、 ajax传输json、封装
- Python3.5学习笔记-列表、元组、字典
- HDU 3569 Imaginary Date 简单期望
- python+selenium+autoit实现文件上传
- ubuntu15.04下sublime text不能输入中文的解决
- [模板] k短路
- PHP(一般标签介绍,标签特性,实体名称,绝对路径与相对路径)
- 实训二(cocos2dx 2.x 打包apk)
- @Transactional导致AbstractRoutingDataSource动态数据源无法切换的解决办法
热门文章
- 集训队8月9日(组合计数+容斥原理+Mobius函数)
- [杂题]:staGame(博弈论+Trie树+DFS)
- 戴尔DELL P2419H显示器连接笔记本之后,笔记本的耳机不工作了
- xshell链接linux出现SSH服务器拒绝了密码 的解决方案
- Java8 新特性学习 Lambda表达式 和 Stream 用法案例
- Python 的PIL,可以解决ImportError The _imagingft C module is not installed
- 使用jquery.validate组件进行前端数据验证并实现异步提交前验证检查
- elasticsearch Java Client用户指南
- 【知识强化】第五章 输入/输出(I/O)管理 5.1 I/O管理概述
- shells - 有效登录 shell 的路径名