首页 > 代码库 > 用css3画企鹅
用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>
用css3画企鹅
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。