今天看啥
热点:

纯CSS打造的安卓系统开机画面动画特效代,css安卓


<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>纯CSS打造的安卓系统开机画面动画特效代码</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>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>

www.bkjia.comtruehttp://www.bkjia.com/webzh/1002110.htmlTechArticle纯CSS打造的安卓系统开机画面动画特效代,css安卓 !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title纯CSS打造的安卓...

相关文章

帮客评论

视觉看点