css3宽度变大动画_css3动画-加载中...

写几个简单的加载中动画吧。

像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。

第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。

废话不多说了，上代码。

首先，第一个加载中的动画：

html Code

css 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

第二个动画和第一个动画大同小异，第一个动画是将小球整体变大变小，第二动画则是将小方块的高度变大变小，而宽度不变：

html Code

css 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

第三个动画就需要将小球的位置定位一下，让几个小球整体上看起来围成一个圆，然后就像第一个一样使小球变大变小：

html Code

css 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);} }

接下来是第四个动画：

1 

2

 #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