CSS3 小黄人案例
使用 CSS3 和 HTML5 制作一个小黄人。
结构代码：
<div class="wrap">
<!-- 头发 -->
<div class="hair">
<div class="hair_1"></div>
<div class="hair_2"></div>
</div>
<!-- 身体 -->
<div class="body">
<!-- 眼睛 -->
<div class="eyes">
<!-- 左眼 -->
<div class="eyes_l">
<div class="l_black"></div>
<div class="l_white"></div>
</div>
<!-- 右眼 -->
<div class="eyes_r">
<div class="r_black"></div>
<div class="r_white"></div>
</div>
</div>
<!-- 嘴巴 -->
<div class="mouth"></div>
<!-- 裤子 -->
<div class="trousers">
<!-- 裤子上 -->
<div class="trousers_t">
<div class="t_l_belt"></div>
<div class="t_r_belt"></div>
</div>
<!-- 裤子下 -->
<div class="trousers_b"></div>
</div>
</div> <!-- 手臂 -->
<div class="hand">
<div class="hand_l"></div>
<div class="hand_r"></div>
</div> <!-- 腿脚 -->
<div class="foot">
<div class="foot_l"></div>
<div class="foot_r"></div>
</div> </div>
CSS 样式：
.wrap {
width: 400px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
position: relative;
}
/*身体*/
.body {
width: 250px;
height: 400px;
border: 5px solid #000;
border-radius: 125px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
overflow: hidden;
}
/*头发*/
.hair_1,
.hair_2 {
width: 130px;
height: 100px;
border-top: 10px solid #000;
border-radius:50%;
position: absolute;
}
.hair_1 {
left: 100px;
top: 80px;
transform: rotate(45deg);
}
.hair_2 {
left: 102px;
top: 70px;
transform: rotate(50deg);
}
/*手臂*/
.hand_l,
.hand_r {
width: 100px;
height: 100px;
border: 5px solid #000;
position: absolute;
border-radius: 30px;
background-color: yellow;
z-index: -1
}
.hand_l {
left:50px;
top:300px;
transform: rotate(30deg);
}
.hand_r {
right:50px;
top:300px;
transform: rotate(-30deg);
}
.hand_l::after,
.hand_r::after {
content: "";
width: 30px;
height: 10px;
position: absolute;
background: #000;
border-radius:5px;
}
.hand_l::after {
left: 6px;
top: 60px;
transform: rotate(-90deg);
}
.hand_r::after {
right: 6px;
top:60px;
transform: rotate(-90deg);
}
/*腿*/
.foot_l,
.foot_r {
width: 40px;
height: 70px;
background-color: #000;
position: absolute;
top:490px;
z-index: -1;
}
.foot_l {
left:155px;
}
.foot_r {
right:155px;
}
/*脚*/
.foot_l::after,
.foot_r::after {
content: "";
width: 60px;
height: 40px;
background-color: #000;
border-radius: 20px;
position: absolute;
top: 30px;
}
.foot_l::after {
left: -40px;
}
.foot_r::after {
right: -40px;
}
/*眼睛*/
.eyes{
/*width: 100%;
height: 100px;*/
/*border: 1px solid red;*/
position: absolute;
top: 60px;
left: 25px;
}
.eyes_l,
.eyes_r {
width: 90px;
height: 90px;
border: 5px solid #000;
border-radius: 50%;
background-color: #fff;
float: left;
}
.eyes_l::after,
.eyes_r::after {
content: "";
width: 31px;
height: 20px;
position: absolute;
background-color: #000;
top: 35px;
}
.eyes_l::after {
left: -26px;
transform: rotate(20deg);
border-radius: 2px 7px 0px 2px;
}
.eyes_r::after {
right: -26px;
transform: rotate(-20deg);
border-radius: 8px 2px 0px 2px;
}
/*黑色眼珠*/
.l_black,
.r_black {
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 23px;
}
.l_black {
left: 25px;
}
.r_black {
left: 125px;
}
/*白眼珠*/
.l_white,
.r_white {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 40px;
}
.l_white {
left: 50px;
}
.r_white {
left: 130px;
}
/*嘴巴*/
.mouth {
width: 60px;
height: 35px;
border: 5px solid #000;
border-radius: 0 0 0 30px;
position: absolute;
background-color: #fff;
left: 90px;
top: 180px;
transform: rotate(-30deg);
}
.mouth::after {
content: "";
width: 80px;
height: 40px;
background-color: yellow;
position: absolute;
border-bottom: 5px solid #000;
left: 1px;
top: -22px;
transform: rotate(30deg);
}
/*裤子上*/
.trousers {
width: 100%;
height: 150px;
position:absolute;
top: 260px;
}
.trousers_t {
width: 150px;
height: 51px;
background-color: blue;
border: 5px solid #000;
border-bottom: none;
position: absolute;
left: 45px;
z-index:;
}
.trousers_b {
width: 250px;
height: 86px;
background-color: blue;
position: absolute;
top: 50px;
border-top: 5px solid #000;
/*border-radius: 0 0 125px 125px;*/
}
/*肩带*/
.t_l_belt,
.t_r_belt {
width: 100px;
height: 20px;
background-color: blue;
border: 5px solid #000;
position: absolute;
top: -24px;
}
.t_l_belt {
left:-74px;
transform: rotate(35deg);
}
.t_r_belt {
right: -74px;
transform: rotate(-35deg);
}
.t_l_belt::after,
.t_r_belt::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
top: 5px;
}
.t_l_belt::after{
left: 87px;
}
.t_r_belt::after {
left: 3px;
}
/*动画*/
.hair_1,
.hair_2 {
animation: hair 5s ease-in infinite;
}
@keyframes hair {
10% {
transform: rotate(45deg);
}
20% {
transform: rotate(56deg);
}
50% {
transform: rotate(45deg);
}
80% {
transform: rotate(56deg);
}
100% {
transform: rotate(45deg);
}
}
.l_black,
.r_black {
animation: eye 5s linear infinite;
}
@keyframes eye {
10% {
transform: translate(0);
}
20% {
transform: translate(20px);
}
50% {
transform: translate(0);
}
80% {
transform: translate(-20px);
}
100% {
transform: translate(0);
}
}
.l_white,
.r_white {
animation: eyewhite 5s linear infinite;
}
@keyframes eyewhite {
10% {
transform: translate(0,0);
}
20% {
transform: translate(20px,5px);
}
50% {
transform: translate(0,0);
}
80% {
transform: translate(-20px,5px);
}
100% {
transform: translate(0,0);
}
}
效果图：
CSS3 小黄人案例的更多相关文章
- CSS3小黄人
CSS3实现小黄人 效果图: 代码如下,复制即可使用: <!DOCTYPE HTML> <HTML> <head> <title>CSS3实现小黄人&l ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- CSS3实现小黄人动画
转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...
- css3实现小黄人
效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <m ...
- [置顶]
几行代码实现ofo首页小黄人眼睛加速感应转动
最新版的ofo 小黄车的首页小黄人眼睛随重力而转动,感觉有点炫酷,学习一下吧,以下代码是在xamarin android下实现 ofo首页效果图: xamarin android实现效果: 实现思路: ...
- Python turtle模块小黄人程序
讲解Python初级课程的turtle模块,简单粗暴的编写了小黄人的程序.程序还需要进一步优化.难点就是要搞清楚turtle在绘制图形过程中的方向变化. import turtle t = turtl ...
- 小黄人IP营销的四种玩法思维导图
小黄人IP营销的四种玩法思维导图 ------------------------------ 本人微信公众帐号: 心禅道(xinchandao) 本人微信公众帐号:双色球预测合买(ssqyuce)
- 静态分析第三发 so文件分析（小黄人快跑)
本文作者:i春秋作家——HAI_ 0×00 工具 1.IDA pro 2.Android Killer 0×01 环境 小黄人快跑 下载地址http://download.csdn.net/downl ...
- 音频算法之小黄人变声 附完整C代码
前面提及到<大话音频变声原理 附简单示例代码>与<声音变调算法PitchShift(模拟汤姆猫) 附完整C++算法实现代码> 都稍微讲过变声的原理和具体实现. 大家都知道,算法 ...
随机推荐
- Base64编码解码(java)
java8之后 final Base64.Decoder decoder = Base64.getDecoder(); final Base64.Encoder encoder = Base64.ge ...
- JFinal 数据库“手动”事务（提交、回滚）
一.用注解 @Before(Tx.class) 实现 事务回滚 @Before(Tx.class) public void pay() throws Exception { //throws exce ...
- Spring 内部机制 Spring AOP
https://my.oschina.net/zhangxufeng/blog/2219005 Spring Bean注册解析(一)和Spring Bean注册解析(二) 彻底征服 Spring AO ...
- Java13新特性 -- 新增 移除 废弃 已知问题等
新增 添加FileSystems.newFileSystem(Path, Map<String, ?>) Method 新的java.nio.ByteBuffer Bulk get/put ...
- MyBatis踩坑之SQLProvider转义字符被删除问题
目录 踩坑背景 问题描述 原因追踪 解决方案 方法一 方法二 踩坑背景 项目架构:Spring Boot + MyBatis + MySQL. 使用MyBatis作为ORM框架,jdbc驱动使用的是m ...
- photoshop7.0 排版一寸照片、2寸照片
说明:必须先照一张一寸电子照片,否则是无法做成 1.本例同样采用photoshop CS5制作,其它版本通用,这里采用上一教程“PS照片处理教程-制作一寸照片并排版”的处理效果图进行排版,首先在PS中 ...
- nodejs调试工具 node-inspect
1.安装 npm install -g node-inspect 2.chrome设置 chrome://flags/#enable-devtools-experiments 3.测试 测试代码mai ...
- Ant Design 学习记录
遇到的问题: 点击列表中的一个字段 , 显示出一条指定id(其他筛选条件的)数据 解决这个问题之前,要先了解 Antd的 Table中的 Column 列描述数据对象,是 columns 中的一项 ...
- 袁新生《LINGO和Excel在数学建模中的应用》
内容介绍 本书深入浅出地介绍了LINGO的基础知识.用LINGO语言描述现实问题的方法和用Excel处理数据的方法,重点是这两种软件在解决各种优化问题以及在数学建模中的应用,通过丰富的实例介绍了把实际 ...
- DRF框架（一）——restful接口规范、基于规范下使用原生django接口查询和增加、原生Django CBV请求生命周期源码分析、drf请求生命周期源码分析、请求模块request、渲染模块render
DRF框架 全称:django-rest framework 知识点 1.接口:什么是接口.restful接口规范 2.CBV生命周期源码 - 基于restful规范下的CBV接口 3.请求组件 ...