纯CSS绘制冰墩墩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
body {
font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
background: #d4ebf1;
color: #000;
}
.m_body {
width: 362px;
height: 410px;
border: #393939 8px solid;
margin: 50px auto;
border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
position: absolute;
left: 109px;
top: -30px;
background: #fff;
}
.ear1, .ear2 {
background: #393939;
width: 81px;
height: 115px;
border-radius: 50%;
position: absolute;
z-index: -1;
}
.ear1 {
left: 150px;
top: 26px;
transform: rotate(-10deg);
}
.ear2 {
left: 362px;
top: 28px;
transform: rotate(10deg);
}
.eye1, .eye2 {
background: #393939;
width: 83px;
height: 115px;
border-radius: 50%;
position: absolute;
}
.eye1 {
left: 185px;
top: 122px;
transform: rotate(45deg);
}
.eye2 {
left: 329px;
top: 122px;
transform: rotate(-45deg);
}
.eye1:before, .eye2:before {
content: "";
width: 40px;
height: 40px;
border: #fff 5px solid;
border-radius: 100%;
position: absolute;
}
.eye1:before {
right: 10px;
top: 22px;
}
.eye2:before {
left: 10px;
top: 22px;
}
.eye1:after, .eye2:after {
content: "";
width: 10px;
height: 10px;
background: #9b9b9b;
border-radius: 100%;
position: absolute;
}
.eye1:after {
right: 27px;
top: 31px;
}
.eye2:after {
left: 41px;
top: 44px;
}
.face {
position: absolute;
border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
}
.c_blue {
border: #6bcdf3 5px solid;
width: 280px;
height: 224px;
left: 150px;
top: 78px;
}
.c_red {
border: #af2350 5px solid;
width: 287px;
height: 233px;
left: 146px;
top: 73px;
}
.c_purple {
border: #5d75b3 5px solid;
width: 295px;
height: 240px;
left: 142px;
top: 70px;
}
.c_yellow {
border: #ffc346 5px solid;
width: 305px;
height: 248px;
left: 137px;
top: 65px;
}
.c_green {
border: #7fcb58 5px solid;
width: 313px;
height: 256px;
left: 133px;
top: 61px;
}
.arm1, .arm2 {
background: #333;
position: absolute;
z-index: -1;
}
.arm1 {
width: 75px;
height: 118px;
left: 64px;
top: 244px;
transform: rotate(45deg);
border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
}
.arm2 {
width: 75px;
height: 148px;
left: 463px;
top: 162px;
transform: rotate(37deg);
border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
}
.arm2:before {
content: "";
width: 16px;
height: 24px;
background: #bc242c;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
left: 32px;
top: 20px;
}
.arm2:after {
content: "";
width: 16px;
height: 24px;
background: #bc242c;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: 26px;
top: 20px;
}
.arm_c {
content: "";
width: 16px;
height: 24px;
position: absolute;
left: 426px;
top: 20px;
}
.nose {
background-color: #333333;
}
.nose:before, .nose:after {
content: '';
position: absolute;
background-color: inherit;
}
.nose, .nose:before, .nose:after {
width: 28px;
height: 18px;
border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
}
.nose {
position: absolute;
left: 284px;
top: 187px;
}
.mouse {
position: absolute;
left: 265px;
top: 205px;
width: 68px;
height: 25px;
border-radius: 48%;
border: #393939 7px solid;
border-top: none;
border-left: 0;
border-right: 0;
}
.leg1, .leg2 {
background: #333;
position: absolute;
width: 83px;
height: 80px;
border-radius: 0 0 30px 30px;
z-index: -1;
}
.leg1 {
left: 187px;
top: 423px;
}
.leg2 {
left: 328px;
top: 423px;
}
.leg1:after, .leg2:after {
content: "";
width: 43px;
height: 30px;
position: absolute;
background: #363636;
border-radius: 30px;
}
.leg1:after {
bottom: 0;
right: -3px;
}
.leg2:after {
bottom: 0;
left: -3px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(".ear1, .ear2").on('click', function () {
$(".ear1, .ear2").css('transform','none');
setTimeout(function () {
$(".ear1").css('transform','rotate(-10deg)');
$(".ear2").css('transform','rotate(10deg)');
},100)
})
</script>
</head>
<body>
<div class="m_body"></div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="face c_blue"></div>
<div class="face c_red"></div>
<div class="face c_purple"></div>
<div class="face c_yellow"></div>
<div class="face c_green"></div>
<div class="nose"></div>
<div class="mouse"></div>
<div class="arm1"></div>
<div class="arm2"></div>
<div class="leg1"></div>
<div class="leg2"></div>
</body>
</html>
如下示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
body {
font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
background: #d4ebf1;
color: #000;
}
.m_body {
width: 362px;
height: 410px;
border: #393939 8px solid;
margin: 50px auto;
border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
position: absolute;
left: 109px;
top: -30px;
background: #fff;
}
.ear1, .ear2 {
background: #393939;
width: 81px;
height: 115px;
border-radius: 50%;
position: absolute;
z-index: -1;
}
.ear1 {
left: 150px;
top: 26px;
transform: rotate(-10deg);
}
.ear2 {
left: 362px;
top: 28px;
transform: rotate(10deg);
}
.eye1, .eye2 {
background: #393939;
width: 83px;
height: 115px;
border-radius: 50%;
position: absolute;
}
.eye1 {
left: 185px;
top: 122px;
transform: rotate(45deg);
}
.eye2 {
left: 329px;
top: 122px;
transform: rotate(-45deg);
}
.eye1:before, .eye2:before {
content: "";
width: 40px;
height: 40px;
border: #fff 5px solid;
border-radius: 100%;
position: absolute;
}
.eye1:before {
right: 10px;
top: 22px;
}
.eye2:before {
left: 10px;
top: 22px;
}
.eye1:after, .eye2:after {
content: "";
width: 10px;
height: 10px;
background: #9b9b9b;
border-radius: 100%;
position: absolute;
}
.eye1:after {
right: 27px;
top: 31px;
}
.eye2:after {
left: 41px;
top: 44px;
}
.face {
position: absolute;
border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
}
.c_blue {
border: #6bcdf3 5px solid;
width: 280px;
height: 224px;
left: 150px;
top: 78px;
}
.c_red {
border: #af2350 5px solid;
width: 287px;
height: 233px;
left: 146px;
top: 73px;
}
.c_purple {
border: #5d75b3 5px solid;
width: 295px;
height: 240px;
left: 142px;
top: 70px;
}
.c_yellow {
border: #ffc346 5px solid;
width: 305px;
height: 248px;
left: 137px;
top: 65px;
}
.c_green {
border: #7fcb58 5px solid;
width: 313px;
height: 256px;
left: 133px;
top: 61px;
}
.arm1, .arm2 {
background: #333;
position: absolute;
z-index: -1;
}
.arm1 {
width: 75px;
height: 118px;
left: 64px;
top: 244px;
transform: rotate(45deg);
border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
}
.arm2 {
width: 75px;
height: 148px;
left: 463px;
top: 162px;
transform: rotate(37deg);
border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
}
.arm2:before {
content: "";
width: 16px;
height: 24px;
background: #bc242c;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
left: 32px;
top: 20px;
}
.arm2:after {
content: "";
width: 16px;
height: 24px;
background: #bc242c;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: 26px;
top: 20px;
}
.arm_c {
content: "";
width: 16px;
height: 24px;
position: absolute;
left: 426px;
top: 20px;
}
.nose {
background-color: #333333;
}
.nose:before, .nose:after {
content: '';
position: absolute;
background-color: inherit;
}
.nose, .nose:before, .nose:after {
width: 28px;
height: 18px;
border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
}
.nose {
position: absolute;
left: 284px;
top: 187px;
}
.mouse {
position: absolute;
left: 265px;
top: 205px;
width: 68px;
height: 25px;
border-radius: 48%;
border: #393939 7px solid;
border-top: none;
border-left: 0;
border-right: 0;
}
.leg1, .leg2 {
background: #333;
position: absolute;
width: 83px;
height: 80px;
border-radius: 0 0 30px 30px;
z-index: -1;
}
.leg1 {
left: 187px;
top: 423px;
}
.leg2 {
left: 328px;
top: 423px;
}
.leg1:after, .leg2:after {
content: "";
width: 43px;
height: 30px;
position: absolute;
background: #363636;
border-radius: 30px;
}
.leg1:after {
bottom: 0;
right: -3px;
}
.leg2:after {
bottom: 0;
left: -3px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(".ear1, .ear2").on('click', function () {
$(".ear1, .ear2").css('transform','none');
setTimeout(function () {
$(".ear1").css('transform','rotate(-10deg)');
$(".ear2").css('transform','rotate(10deg)');
},100)
})
</script>
</head>
<body>
<div class="m_body"></div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="eye1"></div>
<div class="eye2"></div>
<div class="face c_blue"></div>
<div class="face c_red"></div>
<div class="face c_purple"></div>
<div class="face c_yellow"></div>
<div class="face c_green"></div>
<div class="nose"></div>
<div class="mouse"></div>
<div class="arm1"></div>
<div class="arm2"></div>
<div class="leg1"></div>
<div class="leg2"></div>
</body>
</html>
免责/版权声明：
1、所有来源标注为 ECMSPLUS /zwcms.com的内容版权均为本站所有，若您需要引用、转载，只需要注明来源及原文链接即可，如涉及大面积转载，请来信告知，获取授权。
2、本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来（部分报媒/平媒内容转载自网络合作媒体），仅供学习参考，如有侵犯您的版权，请联系我们，本站将在三个工作日内改正。
3、若您的网站或机构从本站获取的一切资源进行商业使用，除来源为本站的资料需与本站协商外，其他资源请自行联系版权所有人。
4、 ECMSPLUS /zwcms.com不保证资源的准确性、安全性和完整性，请您在阅读、下载及使用过程中自行确认，本站亦不承担上述资源对您或您的网站造成的任何形式的损失或伤害
5、未经 ECMSPLUS /zwcms.com允许，不得盗链、盗用本站资源；不得复制或仿造本网站，不得在非 ECMSPLUS /zwcms.com所属的服务器上建立镜像， ECMSPLUS /zwcms.com对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。
6、互联网的本质是自由与分享，我们真诚的希望，每一份有价值的正能量能够在互联网中自由传播，能够为每一个网站提供动力。
评论(3)
欢迎您光临1pma.cn，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！
?
?普通用户