龙空技术网

css3动画-加载中...

is芳小芳 105

前言:

目前同学们对“css动画弹出层”大致比较珍视,小伙伴们都需要知道一些“css动画弹出层”的相关资讯。那么小编也在网络上网罗了一些关于“css动画弹出层””的相关文章,希望咱们能喜欢,兄弟们快快来了解一下吧!

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

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

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

废话不多说了,上代码。

首先,第一个加载中的动画:

html Code

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

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

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

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

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

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 <div id="loading5">2      <div class="demo5"></div>3 </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

以上就是这几个简单的加载中小动画的内容了。

转载

标签: #css动画弹出层