| 123456789101112131415161718192021222324252627282930313233343536 |
- .loader-17 .css-square { position: absolute; top: 50%; width: 40upx; height: 12upx; background: #ffffff; }
- .loader-17 .square1 { left: 180upx; -webkit-animation: dominos 1s 0.125s ease infinite; animation: dominos 1s 0.125s ease infinite; }
- .loader-17 .square2 { left: 160upx; -webkit-animation: dominos 1s 0.3s ease infinite; animation: dominos 1s 0.3s ease infinite; }
- .loader-17 .square3 { left: 140upx; -webkit-animation: dominos 1s 0.425s ease infinite; animation: dominos 1s 0.425s ease infinite; }
- .loader-17 .square4 { left: 120upx; -webkit-animation: dominos 1s 0.540s ease infinite; animation: dominos 1s 0.540s ease infinite; }
- .loader-17 .square5 { left: 100upx; -webkit-animation: dominos 1s 0.665s ease infinite; animation: dominos 1s 0.665s ease infinite; }
- .loader-17 .square6 { left: 80upx; -webkit-animation: dominos 1s 0.79s ease infinite; animation: dominos 1s 0.79s ease infinite; }
- .loader-17 .square7 { left: 60upx; -webkit-animation: dominos 1s 0.9s ease infinite; animation: dominos 1s 0.9s ease infinite; }
- .loader-17 .square8 { left: 40upx; -webkit-animation: dominos 1s 1.01s ease infinite; animation: dominos 1s 1.01s ease infinite; }
- .loader-17 .square9 { left: 20upx; -webkit-animation: dominos 1s 1.10s ease infinite; animation: dominos 1s 1.10s ease infinite; }
- @keyframes dominos {
- 50% {
- opacity: 0.7;
- }
- 75% {
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- }
- 80% {
- opacity: 1;
- }
- }
- @keyframes ball-turn {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
|