一份基于SSM框架实现了支付功能的完整源代码，CSS加载动画效果

3.CSS部分

---

CSS3的结构伪类选择器控制 匹配除了第一个以外的儿子，延时产生感觉，哈哈，为啥不可以直接写在一个里好比.box>div:nth-child(2,3,4,5){ animation-delay: -1s; }不懂，可能还需要完善吧！我是这样想的

.box{

margin: 200px auto;

width: 50px;

height: 50px;

text-align: center;

font-size: 10px;

}

.box > div{

background-color: rgba(64, 219, 25,0.9);

width: 5px;

height: 100%;

/* 行内块 */

display: inline-block;

/* 名字 执行时间 一直执行 先慢再快再慢 */

animation: move 1.2s infinite ease-in-out;

}

/* 定义关键帧 */

@keyframes move{

0%{transform: scaleY(0.4);}

40%{transform: scaleY(0.4);}

60%{transform: scaleY(0.4);}

80%{transform: scaleY(0.4);}

100%{transform: scaleY(0.4);}

20%{transform: scaleY(1);}

}

/* 伪类选择器控制 匹配除了第一个以外的儿子，延时产生感觉*/

.box>div:nth-child(2){

animation-delay: -1s;

}

.box>div:nth-child(3){

animation-delay: -0.9s;

}

.box>div:nth-child(4){

animation-delay: -0.8s;

}

.box>div:nth-child(5){

animation-delay: -0.7s;

}

4.完整代码

---