css3動畫-加載中...

像前面三種都是相當於幾個不同的點輪流來播放同一動畫：變大變小。css3里面有一個用於尺度變換的方法：scale(x,y)：定義 2D 縮放轉換，改變元素的寬度和高度。

第四種就是一個小球從上往下跌落，再彈回去，在上面的時候速度最小，下面的時候速度最大。由於該小球只進行了上下的移動，所以我們可以運用：translateY(n)：定義 2D 轉換，沿着 Y 軸移動元素，從而實現小球沿Y方向來回移動。

 

首先，第一個加載中的動畫：

<div id="loading1">
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
</div>

html Code

.demo1 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #68b2ce;
    float: left;
    margin: 0 3px;
    animation: demo1 linear 1s infinite;
    -webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1){
    animation-delay:0s;
}
.demo1:nth-child(2){
    animation-delay:0.15s;
}
.demo1:nth-child(3){
    animation-delay:0.3s;
}
.demo1:nth-child(4){
    animation-delay:0.45s;
}
.demo1:nth-child(5){
    animation-delay:0.6s;
}
@keyframes demo1 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scale(2.5);}
}

css Code

第二個動畫和第一個動畫大同小異，第一個動畫是將小球整體變大變小，第二動畫則是將小方塊的高度變大變小，而寬度不變：

<div id="loading2">
    <div class="demo2"></div>
    <div class="demo2"></div>
    <div class="demo2"></div>
    <div class="demo2"></div>
    <div class="demo2"></div>
</div>

html Code

.demo2 {
    width: 4px;
    height: 6px;
    background: #68b2ce;
    float: left;
    margin: 0 3px;
    animation: demo2 linear 1s infinite;
    -webkit-animation: demo2 linear 1s infinite;
}
.demo2:nth-child(1){
    animation-delay:0s;
}
.demo2:nth-child(2){
    animation-delay:0.15s;
}
.demo2:nth-child(3){
    animation-delay:0.3s;
}
.demo2:nth-child(4){
    animation-delay:0.45s;
}
.demo2:nth-child(5){
    animation-delay:0.6s;
}
@keyframes demo2 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scaleY(3);}
}
@-webkit-keyframes demo2 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scaleY(3);}
}

css Code

第三個動畫就需要將小球的位置定位一下，讓幾個小球整體上看起來圍成一個圓，然后就像第一個一樣使小球變大變小：

<div id="loading3">
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
</div>

html Code

#loading3 {
    position: relative;
    width: 50px;
    height: 50px;
}
.demo3 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #68b2ce;
    position: absolute;
    animation: demo3 linear 0.8s infinite;
    -webkit-animation: demo3 linear 0.8s infinite;
}
.demo3:nth-child(1){
    left: 24px;
    top: 2px;
    animation-delay:0s;
}
.demo3:nth-child(2){
    left: 40px;
    top: 8px;
    animation-delay:0.1s;
}
.demo3:nth-child(3){
    left: 47px;
    top: 24px;
    animation-delay:0.1s;
}
.demo3:nth-child(4){
    left: 40px;
    top: 40px;
    animation-delay:0.2s;
}
.demo3:nth-child(5){
    left: 24px;
    top: 47px;
    animation-delay:0.4s;
}
.demo3:nth-child(6){
    left: 8px;
    top: 40px;
    animation-delay:0.5s;
}
.demo3:nth-child(7){
    left: 2px;
    top: 24px;
    animation-delay:0.6s;
}
.demo3:nth-child(8){
    left: 8px;
    top: 8px;
    animation-delay:0.7s;
}

@keyframes demo3 
{
    0%,40%,100% {transform: scale(1);}
    20% {transform: scale(3);}
}
@-webkit-keyframes demo3 
{
    0%,40%,100% {transform: scale(1);}
    20% {transform: scale(3);}
}

css Code

 

接下來是第四個動畫：

<div id="loading5">
     <div class="demo5"></div>
</div>

#loading5 {
    width: 20px;
    height: 100px;
    border-bottom: 1px solid #68b2ce;
}
.demo5 {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #68b2ce;
    animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
    -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
}
@keyframes demo5
{
    0%{
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    100% {
        transform:translateY(80px);
        -webkit-transform:translateY(80px);
    }
}
@-webkit-keyframes demo5
{
    0%{
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    100% {
        transform:translateY(80px);
        -webkit-transform:translateY(80px);
    }
}

css Code

 

 

轉載https://www.cnblogs.com/tangchan/p/7604594.html