🎨 修改visualization位置
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 316 KiB After Width: | Height: | Size: 316 KiB |
|
Before Width: | Height: | Size: 382 KiB After Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 144 KiB |
|
Before Width: | Height: | Size: 227 KiB After Width: | Height: | Size: 227 KiB |
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
|
Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 322 KiB |
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 1001 KiB After Width: | Height: | Size: 1001 KiB |
|
Before Width: | Height: | Size: 987 KiB After Width: | Height: | Size: 987 KiB |
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
@ -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>
|
||||||
|
Before Width: | Height: | Size: 764 KiB After Width: | Height: | Size: 764 KiB |