🎨 修改visualization位置

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

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 316 KiB

View File

Before

Width:  |  Height:  |  Size: 382 KiB

After

Width:  |  Height:  |  Size: 382 KiB

View File

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 144 KiB

View File

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 227 KiB

View File

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 163 KiB

View File

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 322 KiB

View File

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 255 KiB

View File

Before

Width:  |  Height:  |  Size: 1001 KiB

After

Width:  |  Height:  |  Size: 1001 KiB

View File

Before

Width:  |  Height:  |  Size: 987 KiB

After

Width:  |  Height:  |  Size: 987 KiB

View File

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 85 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

View File

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

View File

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

View File

Before

Width:  |  Height:  |  Size: 764 KiB

After

Width:  |  Height:  |  Size: 764 KiB