fuhouyin/mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 修改visualization位置

Browse Source
This commit is contained in:
fuhouyin 2024-02-19 09:30:19 +08:00
parent b2f60f9d1a
commit af6f4d64d2
20 changed files with 230 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
visualization/img/535gqbottomright.png → src/main/visualization/img/535gqbottomright.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
visualization/img/53gqbottomleft.png → src/main/visualization/img/53gqbottomleft.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
visualization/img/53gqleft.png → src/main/visualization/img/53gqleft.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

0
visualization/img/53gqright.png → src/main/visualization/img/53gqright.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

0
visualization/img/bg.png → src/main/visualization/img/bg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 316 KiB

0
visualization/img/circle2.png → src/main/visualization/img/circle2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 382 KiB

After

Width:  |  Height:  |  Size: 382 KiB

0
visualization/img/circle3-1.png → src/main/visualization/img/circle3-1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 144 KiB

0
visualization/img/circle3-2.png → src/main/visualization/img/circle3-2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 227 KiB

0
visualization/img/circle3-3.png → src/main/visualization/img/circle3-3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 163 KiB

0
visualization/img/circle3-4.png → src/main/visualization/img/circle3-4.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 322 KiB

0
visualization/img/circle3-5.png → src/main/visualization/img/circle3-5.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 255 KiB

0
visualization/img/circleyuan.png → src/main/visualization/img/circleyuan.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1001 KiB

After

Width:  |  Height:  |  Size: 1001 KiB

0
visualization/img/circleyuan1.png → src/main/visualization/img/circleyuan1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 987 KiB

After

Width:  |  Height:  |  Size: 987 KiB

0
visualization/img/lksd.png → src/main/visualization/img/lksd.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 85 KiB

0
visualization/img/qbzc.png → src/main/visualization/img/qbzc.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

0
visualization/img/qcyd.png → src/main/visualization/img/qcyd.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

0
visualization/img/qlnd.png → src/main/visualization/img/qlnd.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

0
visualization/img/qwfz.png → src/main/visualization/img/qwfz.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

460
visualization/index.html → src/main/visualization/index.html
View File

@ -1,231 +1,231 @@
<!DOCTYPE html>
<html>
<head>
<style>
/*旋转*/
.cicle {
width: 25rem;
height: 25rem;
background: url(img/circleyuan.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 15%;
left: 39%;
transform-style: preserve-3d;
/*transform: translateX(-50%) rotateX(75deg);*/
animation: rotate 5s linear infinite;
}
.cicle-1 {
width: 26.5rem;
height: 26.5rem;
background: url(img/circleyuan1.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 14%;
left: 38.4%;
transform-style: preserve-3d;
/*transform: translateX(-50%) rotateX(75deg);*/
animation: rotate 5s linear infinite;
}
.cicle2 {
width: 50rem;
height: 40rem;
background: url(img/circle2.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 5%;
left: 28%;
/*transform-style: preserve-3d;*/
/*transform: translateX(-50%) rotateX(55deg);*/
/*animation: rotate2 5s linear infinite;*/
}
.cicle3-1 {
width: 45rem;
height: 45rem;
background: url(img/circle3-1.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 40.2%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 5s linear infinite;
}
.cicle3-2 {
width: 45rem;
height: 45rem;
background: url(img/circle3-2.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 43%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 6s linear infinite;
}
.cicle3-3 {
width: 45rem;
height: 45rem;
background: url(img/circle3-3.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 46%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 9s linear infinite;
}
.cicle3-4 {
width: 40rem;
height: 40rem;
background: url(img/circle3-4.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 54%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 5s linear infinite;
}
.cicle3-5 {
width: 45rem;
height: 45rem;
background: url(img/circle3-5.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 52%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 9s linear infinite;
}
.cicle4 {
width: 15rem;
height: 15rem;
position: absolute;
top: 45%;
left: 50%;
transform-style: preserve-3d;
background: url(img/53gqright.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 2s linear infinite;
}
.cicle5 {
width: 15rem;
height: 15rem;
position: absolute;
top: 48%;
left: 50%;
transform-style: preserve-3d;
background: url(img/53gqleft.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate4 2s linear infinite;
}
.cicle6 {
width: 12rem;
height: 12rem;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
background: url(img/535gqbottomright.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 2s linear infinite;
}
.cicle7 {
width: 12rem;
height: 12rem;
position: absolute;
top: 53%;
left: 50%;
transform-style: preserve-3d;
background: url(img/53gqbottomleft.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate4 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate2 {
0% {
transform: translateX(-50%) rotateX(55deg) rotateZ(0);
}
100% {
transform: translateX(-50%) rotateX(55deg) rotateZ(360deg);
}
}
@keyframes rotate3 {
0% {
transform: translateX(-50%) rotateX(75deg) rotateZ(0);
}
100% {
transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
}
}
@keyframes rotate4 {
0% {
transform: translateX(-50%) rotateX(75deg) rotateZ(0);
}
100% {
transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
}
}
#id1,#id2,#id3,#id4,#id5{
animation: heartbeat 1.25s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1)
}
10% {
transform: scale(1.20)
}
50% {
transform: scale(1.25)
}
100% {
transform: scale(1)
}
}
</style>
</head>
<body style="background-image: url('img/bg.png');background-repeat: no-repeat;background-size: cover;">
<div>
<div class="cicle"></div>
<div class="cicle-1"></div>
<div class="cicle2"></div>
<div id="id1" style="background-image: url('img/qcyd.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 641px;margin-top:106px"></div>
<div id="id2" style="background-image: url('img/qwfz.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 1157px;margin-top: -8px"></div>
<div id="id3" style="background-image: url('img/qbzc.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 631px;margin-top: 63px"></div>
<div id="id4" style="background-image: url('img/lksd.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 1208px;margin-top: -17px"></div>
<div id="id5" style="background-image: url('img/qlnd.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 997px;margin-top: -40px"></div>
<div class="cicle3-1"></div>
<div class="cicle3-2"></div>
<div class="cicle3-3"></div>
<div class="cicle3-4"></div>
<div class="cicle3-5"></div>
<div class="cicle4"></div>
<div class="cicle5"></div>
<div class="cicle6"></div>
<div class="cicle7"></div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
/*旋转*/
.cicle {
width: 25rem;
height: 25rem;
background: url(img/circleyuan.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 15%;
left: 39%;
transform-style: preserve-3d;
/*transform: translateX(-50%) rotateX(75deg);*/
animation: rotate 5s linear infinite;
}
.cicle-1 {
width: 26.5rem;
height: 26.5rem;
background: url(img/circleyuan1.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 14%;
left: 38.4%;
transform-style: preserve-3d;
/*transform: translateX(-50%) rotateX(75deg);*/
animation: rotate 5s linear infinite;
}
.cicle2 {
width: 50rem;
height: 40rem;
background: url(img/circle2.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 5%;
left: 28%;
/*transform-style: preserve-3d;*/
/*transform: translateX(-50%) rotateX(55deg);*/
/*animation: rotate2 5s linear infinite;*/
}
.cicle3-1 {
width: 45rem;
height: 45rem;
background: url(img/circle3-1.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 40.2%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 5s linear infinite;
}
.cicle3-2 {
width: 45rem;
height: 45rem;
background: url(img/circle3-2.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 43%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 6s linear infinite;
}
.cicle3-3 {
width: 45rem;
height: 45rem;
background: url(img/circle3-3.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 46%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 9s linear infinite;
}
.cicle3-4 {
width: 40rem;
height: 40rem;
background: url(img/circle3-4.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 54%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 5s linear infinite;
}
.cicle3-5 {
width: 45rem;
height: 45rem;
background: url(img/circle3-5.png) no-repeat center;
background-size: 100%;
position: absolute;
top: 52%;
left: 50%;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 9s linear infinite;
}
.cicle4 {
width: 15rem;
height: 15rem;
position: absolute;
top: 45%;
left: 50%;
transform-style: preserve-3d;
background: url(img/53gqright.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 2s linear infinite;
}
.cicle5 {
width: 15rem;
height: 15rem;
position: absolute;
top: 48%;
left: 50%;
transform-style: preserve-3d;
background: url(img/53gqleft.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate4 2s linear infinite;
}
.cicle6 {
width: 12rem;
height: 12rem;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
background: url(img/535gqbottomright.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate3 2s linear infinite;
}
.cicle7 {
width: 12rem;
height: 12rem;
position: absolute;
top: 53%;
left: 50%;
transform-style: preserve-3d;
background: url(img/53gqbottomleft.png) no-repeat center;
background-size: 100%;
transform: translateX(-50%) rotateX(75deg);
animation: rotate4 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate2 {
0% {
transform: translateX(-50%) rotateX(55deg) rotateZ(0);
}
100% {
transform: translateX(-50%) rotateX(55deg) rotateZ(360deg);
}
}
@keyframes rotate3 {
0% {
transform: translateX(-50%) rotateX(75deg) rotateZ(0);
}
100% {
transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
}
}
@keyframes rotate4 {
0% {
transform: translateX(-50%) rotateX(75deg) rotateZ(0);
}
100% {
transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
}
}
#id1,#id2,#id3,#id4,#id5{
animation: heartbeat 1.25s infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1)
}
10% {
transform: scale(1.20)
}
50% {
transform: scale(1.25)
}
100% {
transform: scale(1)
}
}
</style>
</head>
<body style="background-image: url('img/bg.png');background-repeat: no-repeat;background-size: cover;">
<div>
<div class="cicle"></div>
<div class="cicle-1"></div>
<div class="cicle2"></div>
<div id="id1" style="background-image: url('img/qcyd.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 641px;margin-top:106px"></div>
<div id="id2" style="background-image: url('img/qwfz.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 1157px;margin-top: -8px"></div>
<div id="id3" style="background-image: url('img/qbzc.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 631px;margin-top: 63px"></div>
<div id="id4" style="background-image: url('img/lksd.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 1208px;margin-top: -17px"></div>
<div id="id5" style="background-image: url('img/qlnd.png');background-repeat: no-repeat;background-size: cover;height: 86px;width: 80px;margin-left: 997px;margin-top: -40px"></div>
<div class="cicle3-1"></div>
<div class="cicle3-2"></div>
<div class="cicle3-3"></div>
<div class="cicle3-4"></div>
<div class="cicle3-5"></div>
<div class="cicle4"></div>
<div class="cicle5"></div>
<div class="cicle6"></div>
<div class="cicle7"></div>
</div>
</body>
</html>

0
visualization/visualization.png → src/main/visualization/visualization.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 764 KiB

After

Width:  |  Height:  |  Size: 764 KiB