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

野性酷女 2022-10-06 08:59 160阅读 0赞

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

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML & CSS box sizing

box-sizing属性介绍 box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。 b

た入场券/ 2022年12月12日 12:27/ 0 赞/ 92 阅读

相关支付中loading动效

支付中动效 1：loading图标制作 2：支付中 '...' 动态显示 => loading图标 .rotateBox{ height: 60

ゝ一纸荒年。/ 2022年12月05日 15:18/ 0 赞/ 243 阅读

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

CSS 语言： CSSSCSS 确定 .loader-wrap \{ position: absolute; left: 0; right: 0; top: 0

野性酷女/ 2022年10月06日 08:59/ 0 赞/ 161 阅读

相关 css代码皮卡丘动效

[下载地址][Link 1]css代码皮卡丘动效，很有创意的网页代码。 ![1631560814.png][] dd: [Link 1]: https://yy123.

红太狼/ 2022年09月12日 04:41/ 0 赞/ 256 阅读

相关 css 涟漪,CSS3 涟漪形图案动效

CSS 语言： CSSSCSS 确定 @-webkit-keyframes pulse \{ 0% \{ box-shadow: 0 0 0 0; color:

Love The Way You Lie/ 2022年09月03日 01:28/ 0 赞/ 222 阅读

相关 css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

CSS 语言： CSSSCSS 确定 \animation\{ width:180px; height:180px; background-image:url(h

水深无声/ 2022年09月03日 01:26/ 0 赞/ 258 阅读

相关一个绚丽的loading动效分析与实现！

最终效果如下 ![Center][] 从效果上看，我们需要考虑以下几个问题： 1.叶子的随机产生； 2.叶子随着一条正余弦曲线移动； 3.叶子在移动的时候旋

不念不忘少年蓝@/ 2022年07月24日 07:15/ 0 赞/ 225 阅读

相关实现体检动效、数据滚动条动效和加载动效

手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现三个交互体验：体验动效类似防护软件的数据校验，使校验数据的过程更生动，而不单调；

我不是女神ヾ/ 2022年02月22日 14:22/ 0 赞/ 326 阅读

相关前端必须珍藏六个CSS3动效库

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

- 日理万妓/ 2022年02月04日 07:15/ 0 赞/ 371 阅读

相关 css 画一条竖线或横线

横线 <div style="width:100px;border: 1px solid d0d0d0;"></div> 竖线： <div

红太狼/ 2021年12月07日 12:04/ 0 赞/ 437 阅读