一款简单实用的纯CSS进度加载动画,有多个不同的样式可以选择,均可直接复制元素和样式进行移植,喜欢的小伙伴们请收下吧。
页面的head部分,需要设置好6个进度加载的样式,代码较多,这里仅贴出部分代码:
body {
background: #262E31;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
color: #FFC107;
}
h1 {
font-weight: normal;
margin: 30px 0 80px 0;
text-align: center;
}
p {
font-weight: normal;
font-size: 22px;
clear: both;
text-align: center;
}
div {
width: 30%;
margin: 0 1.5%;
height: 150px;
text-align: center;
float: left;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 100%;
height: 18px;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(200px) rotateX(0) rotateY(180deg);
transform: perspective(200px) rotateX(0) rotateY(180deg);
}
50% {
-webkit-transform: perspective(200px) rotateX(0) rotateY(0);
transform: perspective(200px) rotateX(0) rotateY(0);
}
100% {
-webkit-transform: perspective(200px) rotateX(180deg) rotateY(0);
transform: perspective(200px) rotateX(180deg) rotateY(0);
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(200px) rotateX(0) rotateY(180deg);
transform: perspective(200px) rotateX(0) rotateY(180deg);
}
50% {
-webkit-transform: perspective(200px) rotateX(0) rotateY(0);
transform: perspective(200px) rotateX(0) rotateY(0);
}
100% {
-webkit-transform: perspective(200px) rotateX(180deg) rotateY(0);
transform: perspective(200px) rotateX(180deg) rotateY(0);
}
}
.p1 progress {
width: 48px;
height: 48px;
-webkit-animation: flip 1.2s infinite ease-in-out;
animation: flip 1.2s infinite ease-in-out;
}
.p1 progress::-webkit-progress-bar {
background: #FFEE58;
}
.p1 progress::-webkit-progress-value {
background: transparent;
}
.p2 progress::-webkit-progress-bar {
background-color: #e1e1e1;
}
.p2 progress::-webkit-progress-value {
background: -webkit-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%);
background: linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%);
background-color: #ff7584;
background-size: 40px 20px;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
页面的body部分,就是progress标签放置在6个不同div容器里面,代码如下:
<h1>纯CSS进度加载动画</h1>
<div class="p2">
<progress max="100" value="40"></progress>
</div>
<div class="p3">
<progress max="100" value="70"></progress>
</div>
<div class="p4">
<progress></progress>
</div>
<div class="p5">
<progress></progress>
</div>
<div class="p1">
<progress max="100" value="70"></progress>
</div>
<div class="p6">
<progress></progress>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791