gpt4 book ai didi

javascript - 在 css3 中使用百分比创建预加载器

转载 作者:太空宇宙 更新时间:2023-11-04 03:03:54 26 4
gpt4 key购买 nike

我需要创建一个预加载器,如下所示。我使用了很多插件,但没有发现值得使用的东西。我还需要绑定(bind)加载百分比。我已经完成了百分比绑定(bind)。但不能将百分比嵌入到 css 圆圈中。谁能帮帮我。

This is my work so far.

这是我的html

<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>

这是我的CSS

.wrapper {
position: relative;
margin: 40px auto;
background: white;
}

.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.wrapper {
width: 250px;
height: 250px;
}

.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #08C;
border: 5px solid rgba(0,0,0,0.5);
}

.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota 5s linear ;
animation-fill-mode:forwards;
}

.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}

.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5s steps(1, end) reverse;
animation-fill-mode:forwards;
border-left: none;
}

.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa 5s steps(1, end);
animation-fill-mode:forwards;
}

@keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes opa {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}

为了进一步说明,我附上了一张图片以满足我的要求。 enter image description here

最佳答案

我认为唯一的办法就是(对不起,长代码)

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.wrapper {
position: relative;
margin: 40px auto;
background: white;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.wrapper {
width: 250px;
height: 250px;
}

.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #08C;
border: 5px solid rgba(0,0,0,0.5);
}

.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota 5s linear ;
animation-fill-mode:forwards;
}

.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}

.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5s steps(1, end) reverse;
animation-fill-mode:forwards;
border-left: none;
}

.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa 5s steps(1, end);
animation-fill-mode:forwards;
}

.wrapper .percentage {
position: absolute;
width: 40px;
height: 20px;
overflow: hidden;
bottom: -30px;
left: 42%;
}
.wrapper .percentage:after {
content: attr(data-val);
position: absolute;
top: 0;
left: 0;
line-height: 20px;
text-align: right;
animation: perc 5s steps(1, end);
}

@keyframes perc {
0% { margin-top: 0px;}
1% { margin-top: -20px;}
2% { margin-top: -40px;}
3% { margin-top: -60px;}
4% { margin-top: -80px;}
5% { margin-top: -100px;}
6% { margin-top: -120px;}
7% { margin-top: -140px;}
8% { margin-top: -160px;}
9% { margin-top: -180px;}
10% { margin-top: -200px;}
11% { margin-top: -220px;}
12% { margin-top: -240px;}
13% { margin-top: -260px;}
14% { margin-top: -280px;}
15% { margin-top: -300px;}
16% { margin-top: -320px;}
17% { margin-top: -340px;}
18% { margin-top: -360px;}
19% { margin-top: -380px;}
20% { margin-top: -400px;}
21% { margin-top: -420px;}
22% { margin-top: -440px;}
23% { margin-top: -460px;}
24% { margin-top: -480px;}
25% { margin-top: -500px;}
26% { margin-top: -520px;}
27% { margin-top: -540px;}
28% { margin-top: -560px;}
29% { margin-top: -580px;}
30% { margin-top: -600px;}
31% { margin-top: -620px;}
32% { margin-top: -640px;}
33% { margin-top: -660px;}
34% { margin-top: -680px;}
35% { margin-top: -700px;}
36% { margin-top: -720px;}
37% { margin-top: -740px;}
38% { margin-top: -760px;}
39% { margin-top: -780px;}
40% { margin-top: -800px;}
41% { margin-top: -820px;}
42% { margin-top: -840px;}
43% { margin-top: -860px;}
44% { margin-top: -880px;}
45% { margin-top: -900px;}
46% { margin-top: -920px;}
47% { margin-top: -940px;}
48% { margin-top: -960px;}
49% { margin-top: -980px;}
50% { margin-top: -1000px;}
51% { margin-top: -1020px;}
52% { margin-top: -1040px;}
53% { margin-top: -1060px;}
54% { margin-top: -1080px;}
55% { margin-top: -1100px;}
56% { margin-top: -1120px;}
57% { margin-top: -1140px;}
58% { margin-top: -1160px;}
59% { margin-top: -1180px;}
60% { margin-top: -1200px;}
61% { margin-top: -1220px;}
62% { margin-top: -1240px;}
63% { margin-top: -1260px;}
64% { margin-top: -1280px;}
65% { margin-top: -1300px;}
66% { margin-top: -1320px;}
67% { margin-top: -1340px;}
68% { margin-top: -1360px;}
69% { margin-top: -1380px;}
70% { margin-top: -1400px;}
71% { margin-top: -1420px;}
72% { margin-top: -1440px;}
73% { margin-top: -1460px;}
74% { margin-top: -1480px;}
75% { margin-top: -1500px;}
76% { margin-top: -1520px;}
77% { margin-top: -1540px;}
78% { margin-top: -1560px;}
79% { margin-top: -1580px;}
80% { margin-top: -1600px;}
81% { margin-top: -1620px;}
82% { margin-top: -1640px;}
83% { margin-top: -1660px;}
84% { margin-top: -1680px;}
85% { margin-top: -1700px;}
86% { margin-top: -1720px;}
87% { margin-top: -1740px;}
88% { margin-top: -1760px;}
89% { margin-top: -1780px;}
90% { margin-top: -1800px;}
91% { margin-top: -1820px;}
92% { margin-top: -1840px;}
93% { margin-top: -1860px;}
94% { margin-top: -1880px;}
95% { margin-top: -1900px;}
96% { margin-top: -1920px;}
97% { margin-top: -1940px;}
98% { margin-top: -1960px;}
99% { margin-top: -1980px;}
100% { margin-top: -2000px;}
}


@keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes opa {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
</style>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
<div class="percentage" data-val="100% 1% 2% 3% 4% 5% 6% 7% 8% 9% 10% 11% 12% 13% 14% 15% 16% 17% 18% 19% 20% 21% 22% 23% 24% 25% 26% 27% 28% 29% 30% 31% 32% 33% 34% 35% 36% 37% 38% 39% 40% 41% 42% 43% 44% 45% 46% 47% 48% 49% 50% 51% 52% 53% 54% 55% 56% 57% 58% 59% 60% 61% 62% 63% 64% 65% 66% 67% 68% 69% 70% 71% 72% 73% 74% 75% 76% 77% 78% 79% 80% 81% 82% 83% 84% 85% 86% 87% 88% 89% 90% 91% 92% 93% 94% 95% 96% 97% 98% 99%">
</div>
</div>
</body>
</html>

关于javascript - 在 css3 中使用百分比创建预加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30844464/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com