加载动画 css,纯CSS加载动画

.spinner {

margin:10% auto 0 auto;

width:50px;

height:50px;

position:relative;

}

.spinner .spinner-container {

position:absolute;

width:100%;

height:100%;

}

.um_content {

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

background-color:rgba(255,255,255);

z-index:999;

overflow:auto;

}

#loading3 {

position:relative;

width:50px;

height:50px;

}

.demo3 {

width:0.3em;

height:0.3em;

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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值