其他分享
首页 > 其他分享> > css3动画-加载中...

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

标签:css3,...,动画,transform,delay,nth,demo3,animation,child
来源: https://www.cnblogs.com/gopark/p/10949351.html