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网易云*/

效果：

CSS转换动画

原文地址：http://www.cnblogs.com/qian21/p/7839599.html