css绘图（三）：教你用css绘制一个qq企鹅！

教你用css绘制一个qq企鹅！
效果如下：

盒子身体部分代码如下：

对应的样式如下：
#wrap{
width: 116px;
height: 130px;
background: white;
margin: 100px auto;
border: 1px solid green;
position: relative;
}
#wrap .head{
width: 76px;
height: 60px;
background: black;
position: relative;
z-index: 3;
left: 19px;
top: 10px;
border-radius: 38px 38px 38px 38px / 45px 45px 10px 10px;
}
#wrap .eyes_left{
width: 13px;
height: 20px;
background: white;
position: absolute;
left: 20px;
top: 15px;
border-radius: 7px 3px 3px 7px / 10px 10px 10px 10px;
}
#wrap .pupil_left{
width: 8px;
height: 10px;
background: black;
position: absolute;
border-radius: 50%;
left: 4px;
top: 6px;
}
#wrap .eyes_right{
width: 13px;
height: 20px;
background: white;
position: absolute;
left: 45px;
top: 15px;
border-radius: 7px 3px 3px 7px / 10px 10px 10px 10px;
}
#wrap .pupil_right{
width: 10px;
height: 3px;
background: black;
position: absolute;
border-radius: 10px 5px 2px 5px / 10px 5px 2px 5px;
left: 1px;
top: 6px;
}
#wrap .mouth{
width: 44px;
height: 12px;
background: #F59F0E;
position: absolute;
left: 18px;
top: 40px;
border-radius: 20px 20px 30px 30px / 7px 7px 14px 14px;
}
#wrap .scarf{
width: 84px;
height: 22px;
background: red;
position: relative;
z-index: 2;
left: 16px;
border-radius: 10px 10px 40px 40px / 15px 15px 7px 7px;
}
#wrap .scarf:after{
content: ‘’;
width: 10px;
height: 10px;
background: red;
position: fixed;
left: 700px;
top: 182px;
}
#wrap .body_1{
width: 76px;
height: 60px;
background: black;
position: relative;
left: 19px;
z-index: 1;
margin-top: -20px;
border-radius: 0 0 38px 38px / 0 0 30px 30px;
}
#wrap .body_2{
width: 56px;
height: 45px;
background: white;
position: absolute;
left: 12px;
top: 10px;
border-radius: 0 0 28px 28px / 0 0 30px 30px;
}
#wrap .hands{
width: 12px;
height: 50px;
background: black;
position: absolute;
}
#wrap #hands_left{
transform: rotate(20deg);
left: 11px;
top: 60px;
border-radius: 6px / 25px;
}
#wrap #hands_right{
transform: rotate(-20deg);
left: 92px;
top: 60px;
border-radius: 6px / 25px;
}
#wrap .foots{
width: 30px;
height: 16px;
background: #F59F0E;
position: absolute;
z-index: 0;
}
#wrap #foots_left{
left: 20px;
top: 106px;
border-radius: 30px 0 0 8px / 10px 0 0 8px;
}
#wrap #foots_right{
left: 70px;
top: 104px;
border-radius: 0 30px 8px 0/ 0 8px 0 8px;
}
如上即可实现效果。可自行发挥。

css绘图（三）：教你用css绘制一个qq企鹅！相关推荐

如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
看了腾讯全端团队AlloyTeam发布的这篇<使用CSS3绘制腾讯QQ的企鹅Logo>文章,自己仿照了一下,做了个是山寨版的QQ企鹅. 之所以称之为山寨版,是因为原版绘出来的是这样: 而我 ...
用java画企鹅_Fireworks绘制简笔QQ企鹅图像
这里我们使用Fireworks绘制一幅简笔QQ企鹅图像,这里主要熟悉一下工具箱上椭圆.选择.缩放等工具的使用,看看如何通过它们绘制简单的卡通效果.好了,下面我们一起来学习吧! 绘制过程: (1)新建一 ...
HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style=& ...
CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画
文章目录前言设计思路图例完整代码细节&问题 1. 双伪元素 2.CSS并集选择器 2.position 前言最近在学习前端知识,在做背景的时候想弄一个椭圆的弧形,想到以前网上看 ...
Android 自定义控件-Canvas和Paint绘图详解-手把手带你绘制一个时钟.
Android - Paint基础在自定义控件时,经常需要使用canvas.paint等,在canvas类中,绘画基本都是靠drawXXX()方法来完成的,在这些方法中,很多时候都需要用到paint ...
教你用javascript写一个QQ机器人
先放项目地址:https://github.com/sunft1996/qqRobot.js 目前的qq机器人基本上都依赖于smartqq协议,在PC上跑程序,那有没有简单一点的方法呢?正好在前段时间 ...
Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/ ...
CSS（三）：CSS特性与盒子模型
目录 CSS三大特性层叠性继承性行高的继承优先级权重的叠加盒子模型网页布局的本质盒子模型组成边框(border) 表格细线边框边框会影响盒子实际大小! 内边距(padding) p ...
css亮黄色_写给前端工程师的色彩常识：色彩三属性及其在CSS中的应用
关注前端达人,与你共同进步大家好,本篇文章,笔者将给大家聊聊关于设计方面的一些常识,你也许会很奇怪的问,前端工程师有必要了解设计相关的常识吗?那我的答案就是十分有必要.因为我们这个工作岗位做的产品直 ...

css绘图（三）：教你用css绘制一个qq企鹅！

css绘图（三）：教你用css绘制一个qq企鹅！相关推荐

最新文章

热门文章