CSS转换动画

#loda {
width: 200px;
height: 200px;
border-radius: 50%;
border: 15px solid #ffff00;;
border-left-color: #32cd32;
border-top-color: #32cd32;
animation: demo 10s linear 0s infinite;

}

@keyframes demo {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

#lodaing {
text-align: center;
color: #00bfff;
font-size: 25px;
margin: -125px 70px;
position: absolute;
}

<div id="lod">
<div id="loda"></div>
<p id="lodaing">Lodaing</p>
</div>

效果：

制作网易云音乐符

<div class="wangyi">
<div class="wangyi1"></div>
<div class="wangyi2"></div>
<div class="wangyi3"></div>
<div class="wangyi4"></div>
<div class="wangyi5"></div>
<div class="wangyi6"></div>
</div>

/* 网易云音乐符*/
.wangyi {
margin-top: 100px;
margin-left: 85px;
}

.wangyi1 {
width: 6px;
height: 40px;
background: #ffc0cb;
display: inline-block;
animation: wangyi 1s linear 0.2s infinite;
}

.wangyi2 {
width: 6px;
height: 40px;
background: #ffc0cb;
display: inline-block;
animation: wangyi 1s linear 0.4s infinite;     
}

.wangyi3 {
width: 6px;
height: 40px;
background: #ffc0cb;
display: inline-block;
animation: wangyi 1s linear 0.6s infinite;
}

.wangyi4 {
width: 6px;
height: 40px;
background: #ffc0cb;
display: inline-block;
animation: wangyi 1s linear 0.8s infinite;
}

.wangyi5 {
width: 6px;
height: 40px;
background: #ffc0cb;
display: inline-block;
animation: wangyi 1s linear 1s infinite;
}
.wangyi6 {
width: 6px;
height: 40px;
background: #ffc0cb;
display: inline-block;
animation: wangyi 1.2s linear 1s infinite;
}

@keyframes wangyi {
from {
transform: scale(0.4);
}

to {
transform: scale(0.6);
}
}
/*end网易云*/

效果：

 

/*360安全卫士*/

样式：
.box {
position: relative;
}

.rect_1 {
background-position: 1px;
background:url(images/iconlist_1.png) no-repeat;
animation: rect1 2s linear 1;
}

.rect_2 {
background:url(images/iconlist_1.png) no-repeat;
background-position: -173px;
animation: rect2 4s linear;
}

.rect_3 {
background:url(images/iconlist_1.png) no-repeat;
background-position: -347px;
animation: rect3 6s linear 1;
}

.rect_ {
background:url(images/iconlist_1.png) no-repeat;
background-position: -521px;
animation: rect4 8s linear;
}

.rect_5 {
background:url(images/iconlist_1.png) no-repeat;
background-position: -696px;
animation: rect5 10s linear
}

.box li {
width: 174px;
height: 174px;
display: inline-block;
position: absolute;
}

@keyframes rect1 {
from {
transform: translate(0px);
}

to {
transform: translate(175px);
}
}

@keyframes rect2 {
from {
transform: translate(0px);
}

to {
transform: translate(350px);
}
}

@keyframes rect3 {
from {
transform: translate(0px);
}

to {
transform: translate(475px);
}
}

@keyframes rect4 {
from {
transform: translate(0px);
}

to {
transform: translate(600px);
}
}
@keyframes rect5 {
from {
transform: translate(0px);
}

to {
transform: translate(775px);
}
}

 

<div class="box">
<ul>
<li class="rect_1"></li>
<li class="rect_2"></li>
<li class="rect_3"></li>
<li class="rect_4"></li>
<li class="rect_5"></li>
</ul>
</div>

原图：     效果图：

转载于:https://www.cnblogs.com/qian21/p/7839599.html