自己写的css3大白机器人~

wocacaca
wocacaca 发布于 2015-03-13 16:20:50 浏览:5874 类型:原创 - 随笔 分类:HTML/CSS - 我的游戏 二维码: 作者原创 版权保护
自己写的大白,多多指教啦

加了webkit的兼容
ps:我已经写明原创了还被转到知乎,并且变成别人的了,怎么看都觉得有点难受啊...,http://www.zhihu.com/question/28457916  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:#999;}
.Baymax{width:300px; height:600px; margin:20px auto auto auto;  position:relative; }
.head{width:100px; height:75px; position:absolute; left:100px;  border-radius:50%; background:#FFF; box-shadow: 0px 6px 6px #888888,6px 6px 6px #ccc inset; z-index:100; }
.eyes-l{width:15px; height:15px; border-radius:50%; background:#000; position:absolute; left:20px; top:35px;}
.eyes-r{width:15px; height:15px; border-radius:50%; background:#000; position:absolute; right:20px; top:35px;}
.mourse{width:30px; height:3px;  position:absolute; top:42px; left:35px; border-radius:50%;box-shadow: 0px 1px 0px #000;}


.body{ width:214px; height:320px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); position:absolute;border-radius:45% 45% 50% 50%; top:55px; background:#FFF; z-index:99; box-shadow: 6px 0px 6px #CCC inset,-6px 0px 6px #ccc inset;}
.belly{width:224px; height:264px; border-radius:42% 42% 50% 50%; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); background:#fff;box-shadow: 0px 3px 2px #888888, 0px -6px 6px #ccc inset ;}
.belly:before{width:20px; height:120px; position:absolute; left:-2px; content:" "; top:50px; border-radius:50% 20% 20% 50%;box-shadow: 4px 0px 6px #ccc inset; transform:rotate(3deg);-webkit-transform:rotate(3deg);}
.belly:after{width:20px; height:120px; position:absolute; right:-2px; content:" "; top:50px; border-radius:20% 50% 50% 20%;box-shadow: -4px 0px 6px #ccc inset; transform:rotate(-3deg);-webkit-transform:rotate(-3deg);}


.leg-l{width:80px; height:145px; position:absolute; left:70px; top:290px; background:#fff;border-radius:40% 30% 10px 45%; box-shadow: -2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset; }
.leg-r{width:80px; height:145px; position:absolute; right:70px; top:290px; background:#fff;border-radius:30% 40% 45% 10px;box-shadow: 2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset; }

.hand-l{width:78px; height:224px; position:absolute; left:20px; top:75px; background:#fff; border-radius:50%; transform:rotate(16deg);-webkit-transform:rotate(16deg); box-shadow:6px 6px 6px #ccc inset; z-index:91;}
.hl-l{width:50px; height:100px; background:#fff; position:absolute; top:160px; border-radius:50% 50% 40% 40%;transform:rotate(-20deg);-webkit-transform:rotate(-20deg); left:15px;}
.hl-l:before{ content:""; width:15px; height:82px;box-shadow: 4px 0px 6px #ccc inset; transform:rotate(-0deg);-transform:rotate(-0deg); position:absolute; left:0; top:10px;border-radius:50% 20% 20% 50%;}
.f-1{width: 14px;height: 30px;background: #fff;position: absolute;bottom: -40px;left: 65px;transform: rotate(-35deg);-webkit-transform: rotate(-35deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.f-2{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -55px;left: 50px;transform: rotate(-45deg);-transform: rotate(-45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.f-3{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -62px;left: 49px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 89;}

.hand-r{width:78px; height:224px; position:absolute; right:20px; top:75px; background:#fff; border-radius:50%; transform:rotate(-16deg);-webkit-transform:rotate(-16deg); box-shadow:-6px -6px 6px #ccc inset; z-index:91;}
.hr-r{width:50px; height:100px; background:#fff; position:absolute; top:160px; border-radius:50% 50% 40% 40%;transform:rotate(20deg);-webkit-transform:rotate(20deg); right:15px;}
.hr-r:before{ content:""; width:15px; height:82px;box-shadow: -4px 0px 6px #ccc inset; transform:rotate(-0deg);-webkit-transform:rotate(-0deg); position:absolute; right:0; top:10px;border-radius:20% 50% 50% 20%;}
.fr-1{width: 14px;height: 30px;background: #fff;position: absolute;bottom: -40px;right: 65px;transform: rotate(35deg);-webkit-transform: rotate(35deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.fr-2{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -55px;right: 50px;transform: rotate(45deg);-webkit-transform: rotate(45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.fr-3{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -62px;right: 49px;transform: rotate(45deg);-webkit-transform: rotate(45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 89;}

.cover-s{width:64px;  height:15px; position:absolute; left:50%; transform:translate(-50%,0);-webkit-transform:translate(-50%,0); top:19px; z-index:101;}
.cover-x{width:64px; height:12px; position:absolute; left:50%; transform:translate(-50%,0);-webkit-transform:translate(-50%,0); bottom:12px; z-index:101; overflow:hidden;}
.left{width:17px; height:15px; float:left; background:#fff;}
.right{width:17px; height:15px; float:right; background:#fff;}


.heart{width:30px; height:30px; border-radius:50%; position:absolute; box-shadow:2px 2px 2px #ccc inset; right:55px; top:60px; z-index:111; border:1px solid #ccc;}

@keyframes myfirst
{
0% {transform:rotate(0deg);}
25% {transform:rotate(6deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-6deg);}
100{transform:rotate(0deg);}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {transform:rotate(0deg);}
25% {transform:rotate(6deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-6deg);}
100{transform:rotate(0deg);}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
25% {transform:rotate(6deg);-webkit-transform:rotate(6deg);}
50%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
75%{transform:rotate(-6deg);-webkit-transform:rotate(-6deg);}
100{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}

.head{
animation: myfirst 10s infinite;
-moz-animation: myfirst 30s infinite;	/* Firefox */
-webkit-animation: myfirst 30s infinite;	/* Safari 和 Chrome */
}

@keyframes eyeclose1
{
0% {top:19px;}
10% {top:28px;}
20%{top:19px;}
20%{top:28px;}
40%{top:19px;}

}

@-moz-keyframes eyeclose1 /* Firefox */
{
0% {top:19px;}
10% {top:28px;}
20%{top:19px;}
20%{top:27px;}
40%{top:19px;}

}

@-webkit-keyframes eyeclose1 /* Safari 和 Chrome */
{
0% {top:19px;}
5% {top:27px;}
10%{top:19px;}
15%{top:27px;}
20%{top:19px;}

}

.cover-s{
animation: eyeclose1 3s infinite 2s;
-moz-animation: eyeclose1 3s infinite 2s;	/* Firefox */
-webkit-animation: eyeclose1 3s infinite 2s;	/* Safari 和 Chrome */
}

@keyframes eyeclose2
{
0% {bottom:12px;}
10% {bottom:20px;}
20%{bottom:12px;}
20%{bottom:20px;}
40%{bottom:12px;}

}

@-moz-keyframes eyeclose2 /* Firefox */
{
0% {bottom:12px;}
10% {bottom:20px;}
20%{bottom:12px;}
20%{bottom:20px;}
40%{bottom:12px;}

}

@-webkit-keyframes eyeclose2 /* Safari 和 Chrome */
{
0% {bottom:12px;}
5% {bottom:20px;}
10%{bottom:12px;}
15%{bottom:20px;}
20%{bottom:12px;}


}

.cover-x{
animation: eyeclose2 3s infinite 2s;
-moz-animation: eyeclose2 3s infinite 2s;	/* Firefox */
-webkit-animation: eyeclose2 3s infinite 2s;	/* Safari 和 Chrome */
}
</style>
</head>

<body>
<div class="Baymax">
	<div class="head">
    	<div class="cover-s"><div class="left"></div><div class="right"></div></div>
        <div class="cover-x"><div class="left"></div><div class="right"></div></div>
    	<div class="eyes-l"></div>
        <div class="eyes-r"></div>
        <div class="mourse"></div>
    </div>
    <div class="hand-l">
    	<div class="hl-l"></div>
    	<div class="f-1"></div>
        <div class="f-2"></div>
        <div class="f-3"></div>
    </div>
    <div class="hand-r">
    	<div class="hr-r"></div>
    	<div class="fr-1"></div>
        <div class="fr-2"></div>
        <div class="fr-3"></div>
    </div>
    <div class="body">
    	<div class="heart"></div>
    	<div class="belly"></div>
    </div>
    <div class="leg-l"></div>
    <div class="leg-r"></div>
</div>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
body{ background:#999;}
.Baymax{width:300px; height:600px; margin:20px auto auto auto;  position:relative; }
.head{width:100px; height:75px; position:absolute; left:100px;  border-radius:50%; background:#FFF; box-shadow: 0px 6px 6px #888888,6px 6px 6px #ccc inset; z-index:100; }
.eyes-l{width:15px; height:15px; border-radius:50%; background:#000; position:absolute; left:20px; top:35px;}
.eyes-r{width:15px; height:15px; border-radius:50%; background:#000; position:absolute; right:20px; top:35px;}
.mourse{width:30px; height:3px;  position:absolute; top:42px; left:35px; border-radius:50%;box-shadow: 0px 1px 0px #000;}


.body{ width:214px; height:320px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); position:absolute;border-radius:45% 45% 50% 50%; top:55px; background:#FFF; z-index:99; box-shadow: 6px 0px 6px #CCC inset,-6px 0px 6px #ccc inset;}
.belly{width:224px; height:264px; border-radius:42% 42% 50% 50%; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); background:#fff;box-shadow: 0px 3px 2px #888888, 0px -6px 6px #ccc inset ;}
.belly:before{width:20px; height:120px; position:absolute; left:-2px; content:" "; top:50px; border-radius:50% 20% 20% 50%;box-shadow: 4px 0px 6px #ccc inset; transform:rotate(3deg);-webkit-transform:rotate(3deg);}
.belly:after{width:20px; height:120px; position:absolute; right:-2px; content:" "; top:50px; border-radius:20% 50% 50% 20%;box-shadow: -4px 0px 6px #ccc inset; transform:rotate(-3deg);-webkit-transform:rotate(-3deg);}


.leg-l{width:80px; height:145px; position:absolute; left:70px; top:290px; background:#fff;border-radius:40% 30% 10px 45%; box-shadow: -2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset; }
.leg-r{width:80px; height:145px; position:absolute; right:70px; top:290px; background:#fff;border-radius:30% 40% 45% 10px;box-shadow: 2px 0px 2px #999 inset, 4px 0px 4px #CCC inset, -4px 0px 4px #CCC inset; }

.hand-l{width:78px; height:224px; position:absolute; left:20px; top:75px; background:#fff; border-radius:50%; transform:rotate(16deg);-webkit-transform:rotate(16deg); box-shadow:6px 6px 6px #ccc inset; z-index:91;}
.hl-l{width:50px; height:100px; background:#fff; position:absolute; top:160px; border-radius:50% 50% 40% 40%;transform:rotate(-20deg);-webkit-transform:rotate(-20deg); left:15px;}
.hl-l:before{ content:""; width:15px; height:82px;box-shadow: 4px 0px 6px #ccc inset; transform:rotate(-0deg);-transform:rotate(-0deg); position:absolute; left:0; top:10px;border-radius:50% 20% 20% 50%;}
.f-1{width: 14px;height: 30px;background: #fff;position: absolute;bottom: -40px;left: 65px;transform: rotate(-35deg);-webkit-transform: rotate(-35deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.f-2{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -55px;left: 50px;transform: rotate(-45deg);-transform: rotate(-45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.f-3{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -62px;left: 49px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 89;}

.hand-r{width:78px; height:224px; position:absolute; right:20px; top:75px; background:#fff; border-radius:50%; transform:rotate(-16deg);-webkit-transform:rotate(-16deg); box-shadow:-6px -6px 6px #ccc inset; z-index:91;}
.hr-r{width:50px; height:100px; background:#fff; position:absolute; top:160px; border-radius:50% 50% 40% 40%;transform:rotate(20deg);-webkit-transform:rotate(20deg); right:15px;}
.hr-r:before{ content:""; width:15px; height:82px;box-shadow: -4px 0px 6px #ccc inset; transform:rotate(-0deg);-webkit-transform:rotate(-0deg); position:absolute; right:0; top:10px;border-radius:20% 50% 50% 20%;}
.fr-1{width: 14px;height: 30px;background: #fff;position: absolute;bottom: -40px;right: 65px;transform: rotate(35deg);-webkit-transform: rotate(35deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.fr-2{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -55px;right: 50px;transform: rotate(45deg);-webkit-transform: rotate(45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 90;}
.fr-3{width: 14px;height: 40px;background: #fff;position: absolute;bottom: -62px;right: 49px;transform: rotate(45deg);-webkit-transform: rotate(45deg);border-radius: 50% 50% 40%;box-shadow: 0px -2px 2px #ccc inset;z-index: 89;}

.cover-s{width:64px;  height:15px; position:absolute; left:50%; transform:translate(-50%,0);-webkit-transform:translate(-50%,0); top:19px; z-index:101;}
.cover-x{width:64px; height:12px; position:absolute; left:50%; transform:translate(-50%,0);-webkit-transform:translate(-50%,0); bottom:12px; z-index:101; overflow:hidden;}
.left{width:17px; height:15px; float:left; background:#fff;}
.right{width:17px; height:15px; float:right; background:#fff;}


.heart{width:30px; height:30px; border-radius:50%; position:absolute; box-shadow:2px 2px 2px #ccc inset; right:55px; top:60px; z-index:111; border:1px solid #ccc;}

@keyframes myfirst
{
0% {transform:rotate(0deg);}
25% {transform:rotate(6deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-6deg);}
100{transform:rotate(0deg);}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {transform:rotate(0deg);}
25% {transform:rotate(6deg);}
50%{transform:rotate(0deg);}
75%{transform:rotate(-6deg);}
100{transform:rotate(0deg);}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {transform:rotate(0deg);-webkit-transform:rotate(0deg);}
25% {transform:rotate(6deg);-webkit-transform:rotate(6deg);}
50%{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
75%{transform:rotate(-6deg);-webkit-transform:rotate(-6deg);}
100{transform:rotate(0deg);-webkit-transform:rotate(0deg);}
}

.head{
animation: myfirst 10s infinite;
-moz-animation: myfirst 30s infinite;	/* Firefox */
-webkit-animation: myfirst 30s infinite;	/* Safari 和 Chrome */
}

@keyframes eyeclose1
{
0% {top:19px;}
10% {top:28px;}
20%{top:19px;}
20%{top:28px;}
40%{top:19px;}

}

@-moz-keyframes eyeclose1 /* Firefox */
{
0% {top:19px;}
10% {top:28px;}
20%{top:19px;}
20%{top:27px;}
40%{top:19px;}

}

@-webkit-keyframes eyeclose1 /* Safari 和 Chrome */
{
0% {top:19px;}
5% {top:27px;}
10%{top:19px;}
15%{top:27px;}
20%{top:19px;}

}

.cover-s{
animation: eyeclose1 3s infinite 2s;
-moz-animation: eyeclose1 3s infinite 2s;	/* Firefox */
-webkit-animation: eyeclose1 3s infinite 2s;	/* Safari 和 Chrome */
}

@keyframes eyeclose2
{
0% {bottom:12px;}
10% {bottom:20px;}
20%{bottom:12px;}
20%{bottom:20px;}
40%{bottom:12px;}

}

@-moz-keyframes eyeclose2 /* Firefox */
{
0% {bottom:12px;}
10% {bottom:20px;}
20%{bottom:12px;}
20%{bottom:20px;}
40%{bottom:12px;}

}

@-webkit-keyframes eyeclose2 /* Safari 和 Chrome */
{
0% {bottom:12px;}
5% {bottom:20px;}
10%{bottom:12px;}
15%{bottom:20px;}
20%{bottom:12px;}


}

.cover-x{
animation: eyeclose2 3s infinite 2s;
-moz-animation: eyeclose2 3s infinite 2s;	/* Firefox */
-webkit-animation: eyeclose2 3s infinite 2s;	/* Safari 和 Chrome */
}
</style>
</head>

<body>
<div class="Baymax">
	<div class="head">
    	<div class="cover-s"><div class="left"></div><div class="right"></div></div>
        <div class="cover-x"><div class="left"></div><div class="right"></div></div>
    	<div class="eyes-l"></div>
        <div class="eyes-r"></div>
        <div class="mourse"></div>
    </div>
    <div class="hand-l">
    	<div class="hl-l"></div>
    	<div class="f-1"></div>
        <div class="f-2"></div>
        <div class="f-3"></div>
    </div>
    <div class="hand-r">
    	<div class="hr-r"></div>
    	<div class="fr-1"></div>
        <div class="fr-2"></div>
        <div class="fr-3"></div>
    </div>
    <div class="body">
    	<div class="heart"></div>
    	<div class="belly"></div>
    </div>
    <div class="leg-l"></div>
    <div class="leg-r"></div>
</div>
</body>
</html>

个人博客 mikomoon.com/blog/
标签:
z
给个赞 19 人点赞
收藏 4 人收藏
评论 已有 39 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
1379089794
13790897947 天前39F
多拉爱梦好玩
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2016-10-20 13:41:3838F
谢谢啦,我也只是接触不久啦,一起加油~! //@Cherise:好有才啊,无意看了你一篇笔记,然后把你所有笔记基本都翻了一遍emoticon
举报 支持 (0) 回复 (0)
Cherise
Cherise2016-10-19 18:31:5937F
好有才啊,无意看了你一篇笔记,然后把你所有笔记基本都翻了一遍emoticon
举报 支持 (0) 回复 (1)
lawrence
lawrence2015-04-25 12:26:3936F
弱渣:( //@wocacaca:ok哈,起码你标了原文出处,知乎上有人竟然说是他自己做的!气死我了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
gaoyan19901106
gaoyan199011062015-04-08 14:43:2335F
机器人的眼睛自己会位置,萌萌哒 //@wocacaca:ok哈,起码你标了原文出处,知乎上有人竟然说是他自己做的!气死我了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
丫丫_xianer
丫丫_xianer2015-04-02 17:28:4334F
   //@wocacaca:ok哈,起码你标了原文出处,知乎上有人竟然说是他自己做的!气死我了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
r517
r5172015-03-31 16:00:4333F
线条不够圆润  很  赞 //@wocacaca:ok哈,起码你标了原文出处,知乎上有人竟然说是他自己做的!气死我了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
godtea
godtea2015-03-25 07:50:0932F
哈哈,好的,那我就拿过去炫耀啦。
新增了webkit是吗?太棒了!之前我用电脑版Safari浏览也是出现了偏移现象。
再次感谢原作者! //@wocacaca:ok哈,起码你标了原文出处,知乎上有人竟然说是他自己做的!气死我了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
everforyby
everforyby2015-03-24 17:58:2031F
   知乎的直接拿走也太过分了咩! //@wocacaca:已经做兼容 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
cullen
cullen2015-03-24 16:01:2730F
哈哈..好玩好玩 //@wocacaca:已经做兼容 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2015-03-24 15:46:3829F
ok哈,起码你标了原文出处,知乎上有人竟然说是他自己做的!气死我了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (5)
wocacaca
wocacaca2015-03-24 15:15:4728F
已兼容了哈 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2015-03-24 15:15:2627F
太不开心了,被盗走了 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2015-03-24 15:14:5826F
已经做兼容 //@cullen:360极速浏览器,Chrome模式,错位了
举报 支持 (0) 回复 (2)
godtea
godtea2015-03-24 14:59:1725F
太可爱了,太赞了,太喜欢了!我可以转载吗?
http://www.xenonchau.com/baymax.html
还没有添加显式链接~而且我在页面上声明了您的原文链接~

如果侵犯了您的权益请email我,谢谢! //@chachaxw:建议不要用CSS来写很复杂的形状,这样写会影响性能,推荐使用SVG来构建图形! //@小水晶:我也喜欢善良的大白,温暖的大白
举报 支持 (0) 回复 (0)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新