纯css做的安卓开机动画

2022-11-20 18:08:22

随着css3的发展，越来越多的负责绚丽的效果可以由纯css来完成了。用css3实现的动画效果丝毫不必js实现的逊色，而且浏览器对css渲染的速度远比js快，大多数时候css的体积也不js小。其中css3中的动画效果可以实现流畅而强大的动画效果，下面我们来看看css3的能量吧。

下面介绍一个博主完成的纯css3实现的仿安卓开机动画，可爱的安卓机器人。

效果图：

下面给大家提供一个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;

}

码农公寓

相关文章