用css3画企鹅

  1 <!DOCTYPE html>
  2 <html>
  3
  4 <head>
  5 <meta charset="utf-8" />
  6 <meta name="author" content="" />
  7 <meta name="keywords" content="" />
  8 <meta name="description" content="" />
  9 <title> QQ企鹅 </title>
 10 <style>
 11/*                    /_//
 12                     (0 0)
 13 +-------------oOO----(_)----------------+
 14 | @name : liu                           |
 15 | @author    : chang                    |
 16 | @date    : 2014                       |
 17 +--------------------------oOO----------+
 18                    |__|__|
 19                     || ||
 20                    ooO Ooo                  */
 21 .qq{position:relative;width:418px;height:462px;margin:50px auto;}
 22 .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; }
 23 .qq .eye{position:absolute;border:2px solid #000;width:50px;height:76px;border-radius:50%;background-color:#FFF;box-shadow:0 0 2px #000;}
 24 .qq .eye:before{display:block;content:"";width:40%;height:40%;border-radius:50%;}
 25 .qq .eye:first-child{
 26 transform:translate(80px,62px) rotate(-5deg);
 27 -webkit-transform:translate(80px,62px) rotate(-5deg);
 28 -moz-transform:translate(80px,62px) rotate(-5deg);
 29 -o-transform:translate(80px,62px) rotate(-5deg);
 30 -ms-transform:translate(80px,62px) rotate(-5deg);
 31 }
 32 .qq .eye:first-child:before{
 33 transform:translate(25px,25px);
 34 -webkit-transform:translate(25px,25px);
 35 -moz-transform:translate(25px,25px);
 36 -o-transform:translate(25px,25px);
 37 -ms-transform:translate(25px,25px);
 38 background-image:radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 39 background-image:-webkit-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 40 background-image:-moz-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 41 background-image:-o-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 42 background-image:-ms-radial-gradient(60% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 43 }
 44 .qq .eye:nth-child(2){
 45 transform:translate(160px,62px) rotate(5deg);
 46 -webkit-transform:translate(160px,62px) rotate(5deg);
 47 -moz-transform:translate(160px,62px) rotate(5deg);
 48 -o-transform:translate(160px,62px) rotate(5deg);
 49 -ms-transform:translate(160px,62px) rotate(5deg);
 50 }
 51 .qq .eye:nth-child(2):before{
 52 transform:translate(5px,25px);
 53 -webkit-transform:translate(5px,25px);
 54 -moz-transform:translate(5px,25px);
 55 -o-transform:translate(5px,25px);
 56 -ms-transform:translate(5px,25px);
 57 background-image:radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 58 background-image:-webkit-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 59 background-image:-moz-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 60 background-image:-o-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 61 background-image:-ms-radial-gradient(40% 40%,#FFF,#FFF 15%,rgba(0,0,0,.9) 25%,#000);
 62 }
 63 .qq .mouth{position:relative;width:176px;height:60px;margin:0 auto;
 64 transform:translateY(150px);
 65 -webkit-transform:translateY(150px);
 66 -moz-transform:translateY(150px);
 67 -o-transform:translateY(150px);
 68 -ms-transform:translateY(150px);
 69 }
 70 .qq .mouth>div{position:absolute;width:100%;height:100%;background-color:#FE9C01;}
 71 .qq .mouth>div:first-child{border-radius:50% 50% 0 0;clip:rect(0,176px,25px,0);}
 72 .qq .mouth>div:nth-child(2){top:-10px;border-radius:0 0 50% 50%;clip:rect(35px,176px,60px,0);}
 73 .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);}
 74 .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;;}
 75 .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);}
 76 .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);}
 77 .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;}
 78 .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);}
 79 .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);}
 80 .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);}
 81 .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;}
 82 .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);}
 83 .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);}
 84 .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);}
 85 .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);}
 86 </style>
 87 </head>
 88 <body>
 89 <div class="qq">
 90 <div class="head">
 91 <div class="eye">
 92 </div>
 93 <div class="eye">
 94 </div>
 95 <div class="mouth">
 96 <div></div>
 97 <div></div>
 98 <div></div>
 99 </div>
100 </div>
101 <div class="scarf"></div>
102 <div class="body"></div>
103 <div class="hand"></div>
104 <div class="hand hand_right"></div>
105 <div class="foot"></div>
106 <div class="foot foot_right"></div>
107 </div>
108 </body>
109 </html>

时间： 2024-10-15 07:20:12

用css3画企鹅的相关文章

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

如何使用CSS3画出一个叮当猫

刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸首先,先把H

用css3画3d动画的思路

最近试了下CSS3动画,现在通过一个例子简单讲一讲我用css3画3d视图的思路. 任何时候敲代码前都要想清楚我要干什么,我要敲一个简单的3d旋转画册. 一. 1.首先用一个总容器包含所有的图片,设定属性perspective: 1000px,表示他距离我们屏幕1000px的距离,从二维变成了三维 2.要使用3d旋转,必先要有一个参考系使所有图片围绕他旋转,在总容器里面加一个div,添加属性transform-style: preserve-3d就可以变成参考系. 3.然后在这个div里设置动画效

【推荐】纯CSS3画出小黄人并实现动画效果

前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也

css3画三角形

以下是用css3画3角形,效果如下图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> span{ display:inline-block; margin-right:10px} .triangle_top{height:0;width:0; border:10px solid; bord

使用CSS3画出一个叮当猫

原文出处: 郭锦荣欢迎分享原创到伯乐头条刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年

纯CSS3画出小黄人并实现动画效果

原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大

转 css3画三角形的原理

转自 www.cnblogs.com/huangzhilong/p/5030659.html 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了当时