实现loading、360、网易云播放的css动画

<!-- loading  html-->
<div class="load">
<div class="loading">
</div>
<p>loading</p>

   </div>

loading css样式

* {
padding: 0;
margin: 0;
}
.loading {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #34F634;
border-right-color: #262525;
border-top-color: #262525;
animation: ha 3s linear infinite;
}
.load p {
margin-top: -128px;
    margin-left: 62px;
    font-size: 28px;
}
@keyframes ha {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}

======网易云=====

 <!-- 网易云 html-->
   <div class="wangyi">
    <div class="wangyi_1"></div>
    <div class="wangyi_2"></div>
    <div class="wangyi_3"></div>
    <div class="wangyi_4"></div>
    <div class="wangyi_5"></div>
   </div>

======网易云 css 样式=====

/* 网易云 */
.wangyi div {
width: 10px;
height: 50px;
background-color: #1B1B1B;
display: inline-block;
margin-top: 180px;
}
.wangyi_1 {
   animation: wangyi 1s linear 0.2s infinite;
}
.wangyi_2 {
   animation: wangyi 1s linear 0.4s infinite;
}


.wangyi_3 {
   animation: wangyi 1s linear 0.6s infinite;
}


.wangyi_4 {
   animation: wangyi 1s linear 0.8s infinite;
}


.wangyi_5 {
   animation: wangyi 1s linear 1s infinite;
}
@keyframes wangyi {
0% {
transform: scale(0.2);
}
100% {
transform: scale(0.9);
}
}

=====360 html====

 <!-- 360 -->
   <div class="icon">
    <ul>
     <li class="icon1"></li>
     <li class="icon2"></li>
     <li class="icon3"></li>
     <li class="icon4"></li>
     <li class="icon5"></li>
    </ul>
   </div>

=====360 css 样式====

/* 360 */
.icon {
position: relative;
}
.icon li {
width: 175px;
height: 175px;
    display: inline-block;
    list-style: none;
    position: absolute;
    left: 20px;
}
.icon1 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: 2px;
animation: icon1 2s linear infinite;
}
.icon2 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -173px;
animation: icon2 2s linear infinite;
}


.icon3 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -347px;
animation: icon3 2s linear infinite;
}


.icon4 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -521px;
animation: icon4 2s linear infinite;
}


.icon5 {
background: url('../images/iconlist_1.png') no-repeat;
background-position: -695px;
animation: icon5 2s linear infinite;
}
@keyframes icon1 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(200px);
}
}
@keyframes icon2 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(400px);
}
}
@keyframes icon3 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(600px);
}
}
@keyframes icon4 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(800px);
}
}
@keyframes icon5 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}