纯CSS3实现Android开机画面android robot动画

此代码仅供参考

---

代码说明

纯CSS3实现Android开机画面android robot动画，运行效果后可看到安卓机器人在伸出胳膊，转身等效果，在安卓手机开机时一般可看到本效果，不过需要是Google android默认效果，一般现在的Android系统都是由手机制造商给改过了，很少能看到。

---

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>

---

代码演示

点一下机器人，它会眯眼变大哦~

---

---