实现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);
}

}