用css3画企鹅

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <meta name="author" content="" />

 <meta name="keywords" content="" />

 <meta name="description" content="" />

 <title> QQ企鹅 </title>

 <style>

/*                    /_//

 12                     (0 0)

 +-------------oOO----(_)----------------+

 | @name : liu                           |

 | @author    : chang                    |

 | @date    : 2014                       |

 +--------------------------oOO----------+

                    |__|__|

                     || ||

                    ooO Ooo                  */

 .qq{position:relative;width:418px;height:462px;margin:50px auto;}

 .qq .head{position:relative;z-index:10;width:302px;height:238px;margin:0 auto;box-sizing:border-box;-moz-box-sizing:border-box;border:4px solid #2C2C2E;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background-image:radial-gradient(10% 10%,#5A5C70,#211F24 30%);background-image:-webkit-radial-gradient(10% 10%,#5A5C70,#211F24 30%);background-image:-moz-radial-gradient(10% 10%,#5A5C70,#211F24 30%);background-image:-o-radial-gradient(10% 10%,#5A5C70,#211F24 30%);background-image:-ms-radial-gradient(10% 10%,#5A5C70,#211F24 30%);box-shadow:inset 2px 2px 4px 2px #5A5C70,0 2px 2px #D97A6C; }

 .qq .eye{position:absolute;border:2px solid #000;width:50px;height:76px;border-radius:50%;background-color:#FFF;box-shadow:0 0 2px #000;}

 .qq .eye:before{display:block;content:"";width:40%;height:40%;border-radius:50%;}

 .qq .eye:first-child{

 transform:translate(80px,62px) rotate(-5deg);

 -webkit-transform:translate(80px,62px) rotate(-5deg);

 -moz-transform:translate(80px,62px) rotate(-5deg);

 -o-transform:translate(80px,62px) rotate(-5deg);

 -ms-transform:translate(80px,62px) rotate(-5deg);

 }

 .qq .eye:first-child:before{

 transform:translate(25px,25px);

 -webkit-transform:translate(25px,25px);

 -moz-transform:translate(25px,25px);

 -o-transform:translate(25px,25px);

 -ms-transform:translate(25px,25px);

 background-image:radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-webkit-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-moz-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-o-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-ms-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 }

 .qq .eye:nth-child(2){

 transform:translate(160px,62px) rotate(5deg);

 -webkit-transform:translate(160px,62px) rotate(5deg);

 -moz-transform:translate(160px,62px) rotate(5deg);

 -o-transform:translate(160px,62px) rotate(5deg);

 -ms-transform:translate(160px,62px) rotate(5deg);

 }

 .qq .eye:nth-child(2):before{

 transform:translate(5px,25px);

 -webkit-transform:translate(5px,25px);

 -moz-transform:translate(5px,25px);

 -o-transform:translate(5px,25px);

 -ms-transform:translate(5px,25px);

 background-image:radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-webkit-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-moz-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-o-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 background-image:-ms-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);

 }

 .qq .mouth{position:relative;width:176px;height:60px;margin:0 auto;

 transform:translateY(150px);

 -webkit-transform:translateY(150px);

 -moz-transform:translateY(150px);

 -o-transform:translateY(150px);

 -ms-transform:translateY(150px);

 }

 .qq .mouth>div{position:absolute;width:100%;height:100%;background-color:#FE9C01;}

 .qq .mouth>div:first-child{border-radius:50% 50% 0 0;clip:rect(0,176px,25px,0);}

 .qq .mouth>div:nth-child(2){top:-10px;border-radius:0 0 50% 50%;clip:rect(35px,176px,60px,0);}

 .qq .mouth>div:last-child{position:absolute;width:130px;height:100%;left:50%;margin-left:-65px;box-sizing:border-box;border-bottom:10px solid #211F24;border-radius:50%;background-image:radial-gradient(45% 50%,#FEF558,#FE9C01 50%,#FE9C01);background-image:-webkit-radial-gradient(45% 50%,#FEF558,#FE9C01 50%,#FE9C01);background-image:-moz-radial-gradient(45% 50%,#FEF558,#FE9C01 50%,#FE9C01);background-image:-o-radial-gradient(45% 50%,#FEF558,#FE9C01 50%,#FE9C01);background-image:-ms-radial-gradient(45% 50%,#FEF558,#FE9C01 50%,#FE9C01);}

 .qq .scarf{position:absolute;z-index:9;left:50%;top:135px;width:320px;height:150px;margin-left:-164px;border:4px solid #900200;border-radius:50%;background-color:#FE2B00;box-shadow:inset 0 0 4px 4px #C41E05,0 5px 5px #CBDAE5;;}

 .qq .scarf:before{position:absolute;content:"";left:-8px;top:30px;width:50%;height:50%;border-left:5px solid #900200;border-radius:50%;background-color:#FE2B00;transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);}

 .scarf:after{position:absolute;content:"";right:0;top:40px;width:50%;height:50%;border-right:10px solid #900200;border-radius:50%;background-color:#FE2B00;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);-ms-transform:rotate(-30deg);}

 .qq .body{position:absolute;z-index:8;left:50%;top:160px;width:300px;height:280px;margin-left:-175px;border:25px solid #211F24;border-bottom-width:5px;border-radius:50%;box-shadow:inset -15px -10px 50px 20px #CBDAE5;background-color:#FFF;}

 .qq .body:before{position:absolute;content:"";left:30px;top:70px;width:60px;height:100px;border:2px solid #900200;border-radius:30% 20% 30% 60%/70% 100% 20% 40%;background-color:#FE2B00;box-shadow:inset 0 30px 30px #B81705;transform:rotate(5deg);-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);}

 .qq .body:after{position:absolute;content:"";left:70px;top:60px;width:20px;height:80px;border-left:5px solid #900200;border-radius:50%;transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);-ms-transform:rotate(10deg);}

 .qq .hand{position:absolute;top:200px;width:50px;height:160px;border:4px solid #211F24;border-radius:50% 50% 50% 150%;background-image:radial-gradient(0% 60%,#CBDAE5,#211F24 40%);background-image:-webkit-radial-gradient(0% 60%,#CBDAE5,#211F24 40%);background-image:-moz-radial-gradient(0% 60%,#CBDAE5,#211F24 40%);background-image:-o-radial-gradient(0% 60%,#CBDAE5,#211F24 40%);background-image:-ms-radial-gradient(0% 60%,#CBDAE5,#211F24 40%);transform:rotate(40deg);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);}

 .qq .hand:before{display:block;content:"";width:92%;height:100%;margin-left:8px;border-radius:50% 50% 50% 150%;box-shadow:0 0 5px 3px #211F24;background-color: #211F24;}

 .qq .hand_right{left:365px;transform:rotate(-40deg) scaleX(-1);-webkit-transform:rotate(-40deg) scaleX(-1);-moz-transform:rotate(-40deg) scaleX(-1);-o-transform:rotate(-40deg) scaleX(-1);-ms-transform:rotate(-40deg) scaleX(-1);}

 .qq .foot{position:absolute;z-index:1;left:10px;top:400px;width:100px;height:50px;border-left:5px solid #6D260A;border-top:5px solid #6D260A;border-radius:50%;background-color:#FA7F06;transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);-ms-transform:rotate(-25deg);}

 .qq .foot:after{position:absolute;content:"";left:-20px;top:20px;width:150px;height:80px;border:5px solid #6D260A;border-top-width:0;border-radius:90%;box-shadow:inset 0 -5px 5px 3px #F48007,0 8px 5px 2px #A5A5A5;background-image:radial-gradient(20% 20%,#FFE780,#FA7F06 50%);background-image:-webkit-radial-gradient(20% 20%,#FFE780,#FA7F06 50%);background-image:-moz-radial-gradient(20% 20%,#FFE780,#FA7F06 50%);background-image:-o-radial-gradient(20% 20%,#FFE780,#FA7F06 50%);background-image:-ms-radial-gradient(20% 20%,#FFE780,#FA7F06 50%);transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);}

 .qq .foot_right{left:300px;transform:rotate(20deg) scaleX(-1);-webkit-transform:rotate(20deg) scaleX(-1);-moz-transform:rotate(20deg) scaleX(-1);-o-transform:rotate(20deg) scaleX(-1);-ms-transform:rotate(20deg) scaleX(-1);}

 </style>

 </head>

 <body>

 <div class="qq">

 <div class="head">

 <div class="eye">

 </div>

 <div class="eye">

 </div>

 <div class="mouth">

 <div></div>

 <div></div>

 <div></div>

 </div>

 </div>

 <div class="scarf"></div>

 <div class="body"></div>

 <div class="hand"></div>

 <div class="hand hand_right"></div>

 <div class="foot"></div>

 <div class="foot foot_right"></div>

 </div>

 </body>

 </html>

用css3画企鹅的更多相关文章

css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...
如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
如何用CSS3画出一个立体魔方？
前言最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
如何用CSS3画出懂你的3D魔方？
作者:首席填坑官∙苏南公众号:honeyBadger8,群:912594095,本文原创,著作权归作者所有,转载请注明原链接及出处. 前言最近在写<每周动画点点系列>文章,上一期分享了& ...
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
关于用CSS3画图形的一些思考
众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...
（转）浅谈HTML5与css3画饼图！
神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现目前众多站点制 ...

随机推荐

HTML 5 新标签
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
正版Win7永不崩溃的秘密解密系统备份！
备份正版Win7系统打开Win7系统的控制面板,进入“备份和还原”选项,即可要使用正版Win7系统的备份还原功能. 进入Win7“备份和还原”功能点击“设置备份”,即可启动Windows 备份程序 ...
c++ 关于类构造函数的初始化列表
除了性能问题之外,有些时场合初始化列表是不可或缺的,以下几种情况时必须使用初始化列表常量成员,因为常量只能初始化不能赋值,所以必须放在初始化列表里面引用类型,引用必须在定义的时候初始化,并且不能重 ...
enumerate小技巧和列表推导式
1.enumerate enumerate函数用于遍历序列中的元素以及它们的下标,这样你就可以通过index 直接定位你的数据了. 之前对list操作的时候,即想取到下表,又想取到对应值,我是这么来实 ...
Mongodb数据库命令端经常使用操作
数据库基本命令操作数据库经常使用命令 1.Help查看命令提示 help db.help(); db.yourColl.help(); db.youColl.find().help(); rs.he ...
xcode UIImageView创建、图片加载、音频文件播放、延迟调用
代码创建 /** 创建UIImageView */ UIImageView * imageView=[[UIImageView alloc]init]; /** 设置尺寸位置 */ imageView ...
eclipse 修改编码
在Eclipse的开发使用中,我们经常使用的是UTF-8,但是刚刚安装的或者是导入的项目是其他编码的默认是GBK的,这就造成我们的项目乱码,一些中文解析无法查看,对我们的开发造成不便. 工具/原料 E ...
Java动态编程---动态代理
java中动态编程用到的技术有:反射(动态代理),javassist和ASM,这几种动态编程方法相比较,在性能上Javassist高于反射,但低于ASM,因为Javassist增加了一层抽象.在实现成 ...
jquery新增，删除，修改，清空select中的option
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
对“xxx”类型的已垃圾回收委托进行了回调。这可能会导致应用程序崩溃、损坏和数据丢失。向非托管代码传递委托时，托管应用程序必须让这些委托保持活动状态，直到确信不会再次调用它们。
在程序中调用C++链接库中的回调函由于没有考虑生命周期,直接写委托回随机的被gc给回收掉导致报这个错误错误的程序: private void InitPlateIdentify() { try { ...

用css3画企鹅

用css3画企鹅的更多相关文章

随机推荐

热门专题