div+css实现鹦鹉头旋转loading加载动画代码

代码语言:html

所属分类:动画

代码描述:div+css实现鹦鹉头旋转loading加载动画代码

代码标签: div css 鹦鹉 旋转 loading 加载 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    *{
  margin:0;
  padding:0;
}

body{
  background:#18233e;
}
.container{
  position:relative;
  width:100%;
  height:300px;
  padding-top:0px;
  margin: 121px auto;
  
}
.loro{
  position:relative;
  width:231px;
  height:300px;
  margin:0 auto;
  
    
}
.circ{
  position:absolute;
  width:121px;
  height:212px;
  border-radius: 300px 0  0 300px;
  background:#25b1b0;
  margin:30px 50%;
  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
   animation:gira 3s linear infinite;
    -moz-animation: gira 3s alternate infinite;
    -webkit-animation: gira 3s linear infinite;
    -o-animation: gira 3s alternate infinite;
  
  
}
.circ3{
  position:absolute;
  display:block;
  width:80px;
  height:45px;
  border-radius:0 0 90px 90px;
 background:#f7a500;
  margin:121px 192px;
  transform-origin:-21% 53%;
   -webkit-transform-origin:-21% 53%;
  -moz-transform-origin:-21% 53%;
   animation:gira5 3s linear infinite;
    -moz-animation: gira5 3s linear infinite;
    -webkit-animation: gira5 3s linear infinite;
    -o-animation: gira5 3s linear infinite;
  
}
.circ5{
  position:absolute;
  
  width:75px;
  height:121px;
  border-radius:90px 0 0 90px ;
  background:white;
  margin:70px 161px;
   transform-origin:19% 50%;
  -webkit-transform-origin:19% 50%;
  -moz-transform-origin:19% 50%;
   animation:gira3 3s linear infinite;
    -moz-animation: gira3 3s linear infinite;
    -webkit-animation: gira3 3s linear infinite;
    -o-animation: gira3 3s linear infinite;
	
}
.ojo{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#333;
  border:3px solid #ff6666;
  margin:90px 192px;
   animation:va 3s linear infinite;
    -moz-animation: va 3s linear infinite;
    -webkit-animation:va 3s linear infinite;
    -o-animation: va 3s linear infinite;
  z-index:33;
  
}
.circ7{
  position:absolute;
  width:55px;
  height:60px;
  border-radius:0 192px 0 0;
  background:#f7ce43;
  margin:70px 235px;
    transform-origin:102% 207%;
  -webkit-transform-origin:-102% 207%;
  -moz-transform-origin:-102% 207%;
 
   animation:gira7 3s linear infinite;
    -moz-animation: gira7 3s linear infinite;
    -webkit-animation: gira7 3s linear infinite;
    -o-animation: gira7 3s linear infinite;
}

@-webkit-keyframes gira {
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  55% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  60% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  65% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  75% {transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  80% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 85% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 90% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  95% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  100% {  transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);   }
}


@keyframes gira {
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  55% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  60% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  65% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  75% {transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  80% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 85% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 90% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  95% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  100% {  transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);   }
}
@-moz-keyframes gira {
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  55% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  60% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  65% { transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg); }
  75% {transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  80% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 85% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
 90% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  95% { transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);  }
  100% {  transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);   }
}

@-webkit-keyframes gira3{
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  75% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  80% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 85% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 90% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  95% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  100%{transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
}


@keyframes gira3{
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  75% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  80% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 85% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 90% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  95% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  100%{transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
}

@-moz-keyframes gira3{
  0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
    25% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg); }
  50% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  55% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  60% { transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  65% {  transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg); }
  75% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  80% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 85% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
 90% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  95% {transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
  100%{transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);  }
}
@-webkit-keyframes gira5 {
    0% {transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-tr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0