纯CSS3代码制作的仿安卓系统开机动画画面特效代码

稿源：互联网 2018-09-14 00:40:49 点击： 8032 撤稿纠错

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

以下讨论的是和安卓系统开机画面动画特效相关的纯CSS3代码制作的仿安卓系统开机动画画面特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>纯CSS打造的安卓系统开机画面动画特效代码 android robot demo by js.alixixi.com</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代码制作的仿安卓系统开机动画画面特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091491281.shtml方便下次再访问哦。

·上一篇： 一例非常简单的js原生态制作及实现的三级菜单特效代码
·下一篇： div层仿网页框架布局特效代码

纯CSS3代码制作的仿安卓系统开机动画画面特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻