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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>纯CSS3实现Android开机画面android robot</title>
<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>
</head>
<body>
<div class="android">
  <div class="eye"></div>
  <div class="ear"></div>
  <div class="hand"></div>
  <div class="foot"></div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

CSS3

描述

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