CSS3实现的安卓机器人开机动画

2013-10-02 16:40:21 -0700

html代码

<style>
.android{position:relative; width:200px; height:290px; margin:80px auto; background: #A5C63B; border-radius:200px 200px 50px 50px; transition: all .25s ease-out; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; -ms-transition: all .25s ease-out;}
.android:hover{filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); transform: scale(1.2) rotate(3deg); -webkit-transform: scale(1.2) rotate(3deg); -moz-transform: scale(1.2) rotate(3deg); -o-transform: scale(1.2) rotate(3deg); -ms-transform: scale(1.2) rotate(3deg);}
.android:after{content:''; position:absolute; display:block; width:200px; height:8px; top:95px; background: #fff;}
.android .eye:after,
.android .eye:before{content:''; position:absolute; display:block; width:18px; height:18px; top:35px; left:50px; background: #fff; border-radius:15px;}
.android .eye:after{left:auto; right:50px; animation:animated-robot-eye-right 5s ease 1s infinite alternate; -webkit-animation:animated-robot-eye-right 5s ease 1s infinite alternate; -moz-animation:animated-robot-eye-right 5s ease 1s infinite alternate; -o-animation:animated-robot-eye-right 5s ease 1s infinite alternate; -ms-animation:animated-robot-eye-right 5s ease 1s infinite alternate;}
.android .eye:before{animation:animated-robot-eye-right 5s ease 1s infinite alternate; -webkit-animation:animated-robot-eye-right 5s ease 1s infinite alternate; -moz-animation:animated-robot-eye-right 5s ease 1s infinite alternate; -o-animation:animated-robot-eye-right 5s ease 1s infinite alternate; -ms-animation:animated-robot-eye-right 5s ease 1s infinite alternate;}
@keyframes animated-robot-eye-right{0%{}25%{transform: translate(-102px,0px);}50%{}100%{}}
@-webkit-keyframes animated-robot-eye-right{0%{}25%{-webkit-transform: translate(-102px,0px);}50%{}100%{}}
@-moz-keyframes animated-robot-eye-right{0%{}25%{-moz-transform: translate(-102px,0px);}50%{}100%{}}
@-o-keyframes animated-robot-eye-right{0%{}25%{-o-transform: translate(-102px,0px);}50%{}100%{}}
@-ms-keyframes animated-robot-eye-right{0%{}25%{-ms-transform: translate(-102px,0px);}50%{}100%{}}
@keyframes animated-robot-eye-left{0%{}25%{transform: translate(-82px,0px);}50%{}100%{}}
@-webkit-keyframes animated-robot-eye-left{0%{}25%{-webkit-transform: translate(-82px,0px);}50%{}100%{}}
@-moz-keyframes animated-robot-eye-left{0%{}25%{-moz-transform: translate(-82px,0px);}50%{}100%{}}
@-o-keyframes animated-robot-eye-left{0%{}25%{-o-transform: translate(-82px,0px);}50%{}100%{}}
@-ms-keyframes animated-robot-eye-left{0%{}25%{-ms-transform: translate(-82px,0px);}50%{}100%{}}
.android:hover .eye:after,
.android:hover .eye:before{height:3px; top:43px;}
.android .ear:after,
.android .ear:before{content:''; position:absolute; display:block; width:6px; height:40px; top:-25px; left:50px; background: #A5C63B; border-radius:5px; transform:rotate(-25deg); -webkit-transform:rotate(-25deg); -moz-transform:rotate(-25deg); -o-transform:rotate(-25deg); -ms-transform:rotate(-25deg);}
.android .ear:after{left:auto; right:50px; transform:rotate(25deg); -webkit-transform:rotate(25deg); -moz-transform:rotate(25deg); -o-transform:rotate(25deg); -ms-transform:rotate(25deg);}
.android .ear:before{animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-webkit-animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-moz-animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-o-animation:animated-robot-ear-right 5s ease 1s infinite alternate;
-ms-animation:animated-robot-ear-right 5s ease 1s infinite alternate;}
@keyframes animated-robot-ear-right{0%{}25%{transform:translate(90px,6px) rotate(25deg);}50%{}100%{}}
@-webkit-keyframes animated-robot-ear-right{0%{}25%{-webkit-transform:translate(90px,6px) rotate(25deg);}50%{}100%{}}
@-moz-keyframes animated-robot-ear-right{0%{}25%{-moz-transform:translate(90px,6px) rotate(25deg);}50%{}100%{}}
@-o-keyframes animated-robot-ear-right{0%{}25%{-o-transform:translate(90px,6px) rotate(25deg);}50%{}100%{}}
@-ms-keyframes animated-robot-ear-right{0%{}25%{-ms-transform:translate(90px,6px) rotate(25deg);}50%{}100%{}}
@keyframes animated-robot-ear-left{0%{transform: translate(-42px,0px);}25%{}50%{}100%{}}
@-webkit-keyframes animated-robot-ear-left{0%{-webkit-transform: translate(-42px,0px);}25%{}50%{}100%{}}
@-moz-keyframes animated-robot-ear-left{0%{-moz-transform: translate(-42px,0px);}25%{}50%{}100%{}}
@-o-keyframes animated-robot-ear-left{0%{-o-transform: translate(-42px,0px);}25%{}50%{}100%{}}
@-ms-keyframes animated-robot-ear-left{0%{-ms-transform: translate(-42px,0px);}25%{}50%{}100%{}}
.android .hand:after,
.android .hand:before{content:''; position:absolute; display:block; width:44px; height:150px; top:96px; left:-52px; background: #A5C63B; border-radius:44px;}
.android .hand:after{left:auto; right:-52px;}
.android .hand:after{transform-origin:0 0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; -ms-transform-origin:0 0; animation:animated-robot-hand-right 5s ease 1s infinite alternate; -webkit-animation:animated-robot-hand-right 5s ease 1s infinite alternate; -moz-animation:animated-robot-hand-right 5s ease 1s infinite alternate; -o-animation:animated-robot-hand-right 5s ease 1s infinite alternate; -ms-animation:animated-robot-hand-right 5s ease 1s infinite alternate;}
.android .hand:before{transform-origin:44px 0; -webkit-transform-origin:44px 0; -moz-transform-origin:44px 0; -o-transform-origin:44px 0; -ms-transform-origin:44px 0; animation:animated-robot-hand-left 5s ease 1s infinite alternate; -webkit-animation:animated-robot-hand-left 5s ease 1s infinite alternate; -moz-animation:animated-robot-hand-left 5s ease 1s infinite alternate; -o-animation:animated-robot-hand-left 5s ease 1s infinite alternate; -ms-animation:animated-robot-hand-left 5s ease 1s infinite alternate;}
@keyframes animated-robot-hand-right{0%{transform: translate(-52px,0px);}25%{transform: rotate(0deg);}50%{transform: rotate(-180deg);}100%{transform: translate(-10px,120px) rotate(-180deg);}}
@-webkit-keyframes animated-robot-hand-right{0%{-webkit-transform: translate(-52px,0px);}25%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(-180deg);}100%{-webkit-transform: translate(-10px,120px) rotate(-180deg);}}
@-moz-keyframes animated-robot-hand-right{0%{-moz-transform: translate(-52px,0px);}25%{-moz-transform: rotate(0deg);}50%{-moz-transform: rotate(-180deg);}100%{-moz-transform: translate(-10px,120px) rotate(-180deg);}}
@-o-keyframes animated-robot-hand-right{0%{-o-transform: translate(-52px,0px);}25%{-o-transform: rotate(0deg);}50%{-o-transform: rotate(-180deg);}100%{-o-transform: translate(-10px,120px) rotate(-180deg);}}
@-ms-keyframes animated-robot-hand-right{0%{-ms-transform: translate(-52px,0px);}25%{-ms-transform: rotate(0deg);}50%{-ms-transform: rotate(180deg);}100%{-ms-transform: translate(-10px,120px) rotate(180deg);}}
@keyframes animated-robot-hand-left{0%{transform: translate(52px,0px);}25%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: translate(10px,120px) rotate(180deg);}}
@-webkit-keyframes animated-robot-hand-left{0%{-webkit-transform: translate(52px,0px);}25%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(180deg);}100%{-webkit-transform: translate(10px,120px) rotate(180deg);}}
@-moz-keyframes animated-robot-hand-left{0%{-moz-transform: translate(52px,0px);}25%{-moz-transform: rotate(0deg);}50%{-moz-transform: rotate(180deg);}100%{-moz-transform: translate(10px,120px) rotate(180deg);}}
@-o-keyframes animated-robot-hand-left{0%{-o-transform: translate(52px,0px);}25%{-o-transform: rotate(0deg);}50%{-o-transform: rotate(180deg);}100%{-o-transform: translate(10px,120px) rotate(180deg);}}
@-ms-keyframes animated-robot-hand-left{0%{-ms-transform: translate(52px,0px);}25%{-ms-transform: rotate(0deg);}50%{-ms-transform: rotate(-180deg);}100%{-ms-transform: translate(10px,120px) rotate(-180deg);}}
.android .foot:after,
.android .foot:before{content:''; position:absolute; display:block; width:44px; height:110px; bottom:-90px; left:40px; background: #A5C63B; border-radius:44px;}
.android .foot:after{transform-origin:0 0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; -ms-transform-origin:0 0; animation:animated-robot-foot-right 5s ease 1s infinite alternate; -webkit-animation:animated-robot-foot-right 5s ease 1s infinite alternate; -moz-animation:animated-robot-foot-right 5s ease 1s infinite alternate; -o-animation:animated-robot-foot-right 5s ease 1s infinite alternate; -ms-animation:animated-robot-foot-right 5s ease 1s infinite alternate;}
.android .foot:before{transform-origin:44px 0; -webkit-transform-origin:44px 0; -moz-transform-origin:44px 0; -o-transform-origin:44px 0; -ms-transform-origin:44px 0; animation:animated-robot-foot-left 5s ease 1s infinite alternate; -webkit-animation:animated-robot-foot-left 5s ease 1s infinite alternate; -moz-animation:animated-robot-foot-left 5s ease 1s infinite alternate; -o-animation:animated-robot-foot-left 5s ease 1s infinite alternate; -ms-animation:animated-robot-foot-left 5s ease 1s infinite alternate;}
@keyframes animated-robot-foot-right{0%{transform: rotate(0deg);}25%{transform: rotate(0deg);bottom:-120px;}50%{transform: rotate(-90deg);}100%{transform: translate(-50px,-120px);}}
@-webkit-keyframes animated-robot-foot-right{0%{-webkit-transform: rotate(0deg);}25%{-webkit-transform: rotate(0deg);bottom:-120px;}50%{-webkit-transform: rotate(-90deg);}100%{-webkit-transform: translate(-50px,-120px);}}
@-moz-keyframes animated-robot-foot-right{0%{-moz-transform: rotate(0deg);}25%{-moz-transform: rotate(0deg);bottom:-120px;}50%{-moz-transform: rotate(-90deg);}100%{-moz-transform: translate(-50px,-120px);}}
@-o-keyframes animated-robot-foot-right{0%{-o-transform: rotate(0deg);}25%{-o-transform: rotate(0deg);bottom:-120px;}50%{-o-transform: rotate(-90deg);}100%{-o-transform: translate(-50px,-120px);}}
@-ms-keyframes animated-robot-foot-right{0%{-ms-transform: rotate(0deg);}25%{-ms-transform: rotate(0deg);bottom:-120px;}50%{-ms-transform: rotate(-90deg);}100%{-ms-transform: translate(-50px,-120px);}}
@keyframes animated-robot-foot-left{0%{transform: rotate(0deg);}25%{transform: rotate(0deg);bottom:-120px;}50%{transform: rotate(90deg);}100%{transform: translate(50px,-120px);}}
@-webkit-keyframes animated-robot-foot-left{0%{-webkit-transform: rotate(0deg);}25%{-webkit-transform: rotate(0deg);bottom:-120px;}50%{-webkit-transform: rotate(90deg);}100%{-webkit-transform: translate(50px,-120px);}}
@-o-keyframes animated-robot-foot-left{0%{-o-transform: rotate(0deg);}25%{-o-transform: rotate(0deg);bottom:-120px;}50%{-o-transform: rotate(90deg);}100%{-o-transform: translate(50px,-120px);}}
@-moz-keyframes animated-robot-foot-left{0%{-moz-transform: rotate(0deg);}25%{-moz-transform: rotate(0deg);bottom:-120px;}50%{-moz-transform: rotate(90deg);}100%{-moz-transform: translate(50px,-120px);}}
@-ms-keyframes animated-robot-foot-left{0%{-ms-transform: rotate(0deg);}25%{-ms-transform: rotate(0deg);bottom:-120px;}50%{-ms-transform: rotate(90deg);}100%{-ms-transform: translate(50px,-120px);}}
.android .foot:after{left:auto; right:40px;}
</style>
<div class="android">
  <div class="eye"></div>
  <div class="ear"></div>
  <div class="hand"></div>
  <div class="foot"></div>
</div>

演示：在下面

«Newer Older»

----Comments(1)----
伊卡洛斯 (@5518) | @ at 2013-10-03 08:12:
请问下这个页面是如何把那些多余的东西地掉的，呈现出现在的效果呢？

Back to home

Subscribe | Register | Login | N