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

2024-09-05 12:18:54

字体：大中小

来源：转载

供稿：网友

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

<!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>

上一篇：CSS3电子钟(圆形指针电子表)

下一篇：HTML5图片旋转