纯css做的安卓开机动画
随着css3的发展，越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色，而且浏览器对css渲染的速度远比js快，大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果，下面我们来看看css3的能量吧。
下面介绍一个博主完成的纯css3实现的仿安卓开机动画，可爱的安卓机器人。
效果图：
下面给大家提供一个demo可下载地址，先睹为快吧。
下载地址
查看demo
老版本的不兼容safari浏览器，下面是修改后的版本，safari下测试正常。
经测试，发现safari下没有效果的原因是，safari不支持伪元素after,before的动画效果，用div替换伪元素后safari下运行正常。
下载地址
查看demo
下面是源码
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>android robot</title>
<link type="text/css" rel="stylesheet" href="css.css"/>
</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:
.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;
}