1.简易加载中

 

　　@keyframes myfirst

 

　　{

 

　　from{transform: rotate(0deg)}to{transform: rotate(360deg)}

 

　　}

 

　　.loading{

 

　　animation: myfirst 1.5s infinite linear;//infinite控制执行次数这里一直执行，linear执行速度，匀速

 

　　border: 16px solid #f3f3f3;

 

　　border-radius: 50%;

 

　　border-top:16px solid blue;

 

　　width: 120px;

 

　　height: 120px;

 

　　}

 

　　<div class="loading"></div>

 

　　2.简易进度条

 

　　.move {

 

　　width: 0px;

 

　　height: 10px;

 

　　animation: moveHover 5s infinite linear;

 

　　}

 

　　<div class="move"></div>

 

　　3.过渡属性

 

　　.change

 

　　{

 

　　transition: width 2s;

 

　　font-size: 10px;

 

　　width: 100px;

 

　　height: 20px;

 

　　background: yellow;

 

　　-moz-transition: width 2s;    /* Firefox 4 */

 

　　-webkit-transition: width 2s;    /* Safari 和 Chrome */

 

　　-o-transition: width 2s;    /* Opera */

 

　　}

 

　　.change:hover

 

　　{

 

　　width: 500px;

 

　　}

 

　　<div class="change">鼠标滑过</div>

 

　　.bigger{

 

　　font-size: 20px;

 

　　width: 0;

 

　　height: 0;//scale根据宽高变大，必须设置width和height

 

　　background: #2A9F00;

 

　　transition: transform 5s;

 

　　}

 

　　.bigger:hover{

 

　　transform: scale(10);

 

　　}

 

　　<div class="bigger">大</div>