日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

html box 竖线,CSS3 小竖条脉冲型LOADING动效

發(fā)布時間：2024/9/27 76 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html box 竖线,CSS3 小竖条脉冲型LOADING动效 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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);

}

}

總結

以上是生活随笔為你收集整理的html box 竖线,CSS3 小竖条脉冲型LOADING动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。