前言:
目前同学们对“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动画弹出层