html box 竖线,css3 小竖条脉冲型loading动效 -凯发k8官方网
css
语言：
cssscss
确定
.loader-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #ff9328;
}
.loader {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 40px;
width: 80px;
box-sizing: border-box;
}
.loader .loader-item {
position: relative;
float: left;
height: 40px;
width: 4px;
margin: 0 2px;
background-color: #ffffff;
}
.loader .loader-item:nth-child(1) {
-webkit-animation: loader-item-1 2s linear infinite;
animation: loader-item-1 2s linear infinite;
}
.loader .loader-item:nth-child(2) {
-webkit-animation: loader-item-2 2s linear infinite;
animation: loader-item-2 2s linear infinite;
}
.loader .loader-item:nth-child(3) {
-webkit-animation: loader-item-3 2s linear infinite;
animation: loader-item-3 2s linear infinite;
}
.loader .loader-item:nth-child(4) {
-webkit-animation: loader-item-4 2s linear infinite;
animation: loader-item-4 2s linear infinite;
}
.loader .loader-item:nth-child(5) {
-webkit-animation: loader-item-5 2s linear infinite;
animation: loader-item-5 2s linear infinite;
}
.loader .loader-item:nth-child(6) {
-webkit-animation: loader-item-6 2s linear infinite;
animation: loader-item-6 2s linear infinite;
}
.loader .loader-item:nth-child(7) {
-webkit-animation: loader-item-7 2s linear infinite;
animation: loader-item-7 2s linear infinite;
}
.loader .loader-item:nth-child(8) {
-webkit-animation: loader-item-8 2s linear infinite;
animation: loader-item-8 2s linear infinite;
}
.loader .loader-item:nth-child(9) {
-webkit-animation: loader-item-9 2s linear infinite;
animation: loader-item-9 2s linear infinite;
}
.loader .loader-item:nth-child(10) {
-webkit-animation: loader-item-10 2s linear infinite;
animation: loader-item-10 2s linear infinite;
}
.loader:after {
content: 'loading...';
font-size: 16px;
font-family: "arial";
color: #ffffff;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: -32px;
margin: auto;
}
@-webkit-keyframes loader-item-1 {
1% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
11% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
21% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-1 {
1% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
11% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
21% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-2 {
7% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
17% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
27% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-2 {
7% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
17% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
27% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-3 {
13% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
23% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
33% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-3 {
13% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
23% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
33% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-4 {
19% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
29% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
39% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-4 {
19% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
29% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
39% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-5 {
25% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
35% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
45% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-5 {
25% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
35% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
45% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-6 {
31% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
41% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
51% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-6 {
31% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
41% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
51% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-7 {
37% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
47% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
57% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-7 {
37% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
47% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
57% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-8 {
43% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
53% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
63% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-8 {
43% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
53% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
63% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-9 {
49% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
59% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
69% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-9 {
49% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
59% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
69% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@-webkit-keyframes loader-item-10 {
55% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
65% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
75% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
@keyframes loader-item-10 {
55% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
65% {
-webkit-transform: scaley(1.4);
transform: scaley(1.4);
}
75% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
100% {
-webkit-transform: scaley(1);
transform: scaley(1);
}
}
总结
以上是凯发k8官方网为你收集整理的html box 竖线,css3 小竖条脉冲型loading动效的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：