用纯CSS画一个萌萌哒的QQ企鹅

今天一时兴起，想用css画个企鹅。

先分析一下结构，页面分为一个容器，里面包括头部、左右眼、鼻子、围巾、肚子、左右脚、左右手共10个div，代码如下:

html部分：

    <div class="container"><!-- 头部 --><div class="header"></div><!-- 左眼 --><div class="eye_left"></div><!-- 右眼 --><div class="eye_right"></div><!-- 鼻子 --><div class="nose"></div><!-- 围巾 --><div class="scarf"></div><!-- 肚子 --><div class="belly"></div><!-- 左脚 --><div class="foot-left"></div><!-- 右脚 --><div class="foot-right"></div><!-- 左手 --><div class="hand-left"></div><!-- 右手 --><div class="hand-right"></div></div>

css部分:

        * {margin: 0;padding: 0;}.container {margin: 100px auto;width: 400px;height: 400px;position: relative;}/* 头部区域 */.header {width: 150px;height: 150px;border-radius: 100% 100% 40% 40%;background-color: black;position: absolute;top: 135px;left: 109px;}/* 眼睛部分，采用伪元素处理方案 */.eye_left,.eye_right {height: 36px;width: 21px;background-color: white;border-radius: 50%;position: absolute;top: 158px;}.eye_left {left: 159px;}.eye_right {right: 188px;}.eye_left::after{content: "";width: 9px;height: 14px;background-color: black;border-radius: 50%;position: absolute;right: 4px;top: 16px;}.eye_right::after {content: "";width: 14px;height: 8px;border-top: 5px solid black;border-radius: 50%/50%;position: absolute;transform: rotate(-11deg);right: 3px;top: 19px;}.nose {height: 27px;width: 81px;border-radius: 90% 90% 100% 100%;background-color: rgb(224, 157, 69);position: absolute;top: 199px;left: 146px;z-index: 9;}.scarf{width: 150px;position: absolute;top: 220px;left: 109px;border-top: 40px solid red;background-color: red;border-radius: 0% 0% 23% 23%;z-index: 8;}.scarf::before{content: "";width: 150px;position: absolute;top: -48px;left: 0px;border-top: 20px solid black;background-color: black;border-radius: 0% 0% 23% 23%;}.scarf::after{content: "";height: 43PX;width: 36px;position: absolute;top: -9px;left: 33px;background-color: red;border-radius: 0% 0% 23% 23%;}.belly{width: 150px;height: 150px;border-radius:50%;background-color: black;position: absolute;top: 193px;left: 109px;}.belly::before{content: "";width: 110px;height: 130px;border-radius: 50%;background-color: white;position: absolute;top: 13px;left: 21px;}.foot-left,.foot-right{height: 27px;width: 81px;border-radius: 50% 50% 50% 50%;background-color: rgb(224, 157, 69);position: absolute;bottom: 56px;z-index: -1;}.foot-left{left: 112px;}.foot-right{left: 174px;}.hand-left,.hand-right{height: 27px;width: 81px;border-radius: 50% 50% 50% 50%;background-color: black;position: absolute;bottom: 102px;z-index: -1;}.hand-left{left: 71px;transform: rotate(-75deg);}.hand-right{left: 215px;transform: rotate(-100deg);}

最终效果展示,是不是感觉萌萌哒:

用纯CSS画一个萌萌哒的QQ企鹅相关推荐

纯css画一个樱桃小丸子
纯css3画一个樱桃小小丸子,嘻嘻,废话不多少直接上代码吧! <div class="main"><div class="head">& ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
html做微信logo,纯CSS实现一个微信logo，需要几个标签？_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...
html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
java转俯视图,如何使用纯CSS实现一个足球场的俯视图（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个足球场的俯视图(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.c ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...

用纯CSS画一个萌萌哒的QQ企鹅

html部分：

css部分:

用纯CSS画一个萌萌哒的QQ企鹅相关推荐

最新文章

热门文章