html css实现win8,通过CSS3实现win8的Loading效果

阳光穿透心脏的1/2处 2022-10-09 00:53 177阅读 0赞

数据加载中请稍后

.loading-msg\{color: red; font:normal 24px/50px "Microsoft YaHei"; text-align: center; background: \#fff; width: 1000px; margin: 0 auto; \}

.loading-box\{position:relative; padding: 10px 5px 30px 5px; \}

@keyframes loading \{

0% \{

left: 0;

opacity: 0;

5% \{

opacity: 1;

95% \{

opacity: 1;

100% \{

left: 100%;

opacity: 0;

@-webkit-keyframes loading \{

0% \{

left: 0;

opacity: 0;

5% \{

opacity: 1;

95% \{

opacity: 1;

100% \{

left: 100%;

opacity: 0;

@-moz-keyframes loading \{

0% \{

left: 0;

opacity: 0;

5% \{

opacity: 1;

95% \{

opacity: 1;

100% \{

left: 100%;

opacity: 0;

@-o-keyframes loading \{

0% \{

left: 0;

opacity: 0;

5% \{

opacity: 1;

95% \{

opacity: 1;

100% \{

left: 100%;

opacity: 0;

.loading \{

width: 5px;

height: 5px;

background: red;

position: absolute;

opacity: 0;

animation: loading 2s;

\-moz-animation: loading 2s;

\-webkit-animation: loading 2s;

\-o-animation: loading 2s;

animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);

\-webkit-animation-timing-function: cubic-bezier(0.1, 0.48, 0.9, 0.52);

animation-iteration-count: infinite;

\-webkit-animation-iteration-count: infinite;

.loading\[index="0"\] \{

animation-delay: 0.15s;

\-webkit-animation-delay: 0.15s;

.loading\[index="1"\] \{

animation-delay: 0.3s;

\-webkit-animation-delay: 0.3s;

.loading\[index="2"\] \{

animation-delay: 0.45s;

\-webkit-animation-delay: 0.45s;

.loading\[index="3"\] \{

animation-delay: 0.6s;

\-webkit-animation-delay: 0.6s;

.loading\[index="4"\] \{

animation-delay: 0.75s;

\-webkit-animation-delay: 0.75s;

扫码关注w3ctech微信公众号

html css实现win8,通过CSS3实现win8的Loading效果

发表评论取消回复

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

相关阅读

相关简单的 HTML + CSS Loading 效果

相关 HTML + CSS实现图片3D旋转效果

相关 CSS3实现的几种常用Loading效果

相关 html+css3:实现热咖啡杯效果

相关 css实现一个Loading效果

相关 html css实现win8,通过CSS3实现win8的Loading效果

相关纯CSS实现的Loading效果

相关【CSS】使用css实现一个loading效果

相关 8种css3实现的Loading加载中样式

相关 CSS3实现1前端常用Loading效果