702 lines
9.2 KiB
HTML
702 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#logo
|
|
{
|
|
width: 200px;
|
|
height: 200px;
|
|
position:relative;
|
|
left:0px;
|
|
top:0px;
|
|
|
|
|
|
}
|
|
#pot1
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
position:absolute;
|
|
left:70px;
|
|
top:160px;
|
|
border-radius: 20px;
|
|
background: #33BEFF;
|
|
animation: pot1 4s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
#pot2
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
position:absolute;
|
|
left:150px;
|
|
top:130px;
|
|
background: #33BEFF;
|
|
animation: pot2 4s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
#pot3
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
position:absolute;
|
|
left:70px;
|
|
top:50px;
|
|
border-radius: 20px;
|
|
background: #33BEFF;
|
|
animation: pot3 4s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
#line1
|
|
{
|
|
width: 14px;
|
|
height: 120px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 132px;
|
|
background: #33BEFF;
|
|
transform: rotate(-45deg);
|
|
animation: line1 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
#line2
|
|
{
|
|
width: 14px;
|
|
height: 80px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 105px;
|
|
left: 105px;
|
|
background: #33BEFF;
|
|
transform: rotate(30deg);
|
|
animation: line2 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
#line3
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 45px;
|
|
background: #B1B1B1;
|
|
transform: rotate(45deg);
|
|
animation: line3 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
#line4
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 45px;
|
|
left: 30px;
|
|
background: #B1B1B1;
|
|
transform: rotate(90deg);
|
|
animation: line4 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
#line5
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 43px;
|
|
background: #B1B1B1;
|
|
transform: rotate(135deg);
|
|
animation: line5 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
#line6
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 81px;
|
|
background: #B1B1B1;
|
|
animation: line6 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
#line7
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 120px;
|
|
background: #B1B1B1;
|
|
transform: rotate(45deg);
|
|
animation: line7 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
#line8
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
position: absolute;
|
|
top: 45px;
|
|
left: 135px;
|
|
background: #B1B1B1;
|
|
transform: rotate(90deg);
|
|
animation: line8 4s;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
@keyframes pot1
|
|
{
|
|
0%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:70px;
|
|
top:160px;
|
|
|
|
}
|
|
52%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:70px;
|
|
top:160px;
|
|
}
|
|
62%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:180px;
|
|
}
|
|
100%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:180px;
|
|
}
|
|
}
|
|
@keyframes pot2
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
top: 150px;
|
|
left: 160px;
|
|
}
|
|
10%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:150px;
|
|
top:130px;
|
|
}
|
|
52%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:150px;
|
|
top:130px;
|
|
}
|
|
62%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:185px;
|
|
top:165px;
|
|
}
|
|
100%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:185px;
|
|
top:165px;
|
|
}
|
|
}
|
|
|
|
@keyframes line1
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
10%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
top: 160px;
|
|
left: 152px;
|
|
}
|
|
20%
|
|
{
|
|
width: 14px;
|
|
height: 120px;
|
|
border-radius: 7px;
|
|
top: 60px;
|
|
left: 132px;
|
|
}
|
|
62%
|
|
{
|
|
width: 14px;
|
|
height: 120px;
|
|
border-radius: 7px;
|
|
top: 60px;
|
|
left: 132px;
|
|
}
|
|
72%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
top: 60px;
|
|
left: 70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
top: 60px;
|
|
left: 70px;
|
|
}
|
|
}
|
|
|
|
@keyframes line2
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
10%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
top: 160px;
|
|
left: 100px;
|
|
}
|
|
20%
|
|
{
|
|
width: 14px;
|
|
height: 80px;
|
|
border-radius: 7px;
|
|
top: 105px;
|
|
left: 105px;
|
|
}
|
|
60%
|
|
{
|
|
width: 14px;
|
|
height: 80px;
|
|
border-radius: 7px;
|
|
top: 105px;
|
|
left: 105px;
|
|
}
|
|
63%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
top: 115px;
|
|
left: 120px;
|
|
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
top: 115px;
|
|
left: 120px;
|
|
|
|
}
|
|
}
|
|
@keyframes pot3
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
20%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
30%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:70px;
|
|
top:50px;
|
|
}
|
|
80%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:70px;
|
|
top:50px;
|
|
}
|
|
100%
|
|
{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
left:70px;
|
|
top:160px;
|
|
}
|
|
}
|
|
|
|
@keyframes line3
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
30%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
32%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 80px;
|
|
left: 45px;
|
|
}
|
|
68%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 80px;
|
|
left: 45px;
|
|
}
|
|
70%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
}
|
|
|
|
@keyframes line4
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
32%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
34%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 45px;
|
|
left: 30px;
|
|
}
|
|
70%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 45px;
|
|
left: 30px;
|
|
}
|
|
72%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
}
|
|
|
|
@keyframes line5
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
34%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
36%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 8px;
|
|
left: 43px;
|
|
}
|
|
72%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 8px;
|
|
left: 43px;
|
|
}
|
|
74%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
}
|
|
@keyframes line6
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
36%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
38%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: -8px;
|
|
left: 81px;
|
|
}
|
|
74%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: -8px;
|
|
left: 81px;
|
|
}
|
|
76%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
}
|
|
@keyframes line7
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
38%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
40%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 6px;
|
|
left: 120px;
|
|
}
|
|
76%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 6px;
|
|
left: 120px;
|
|
}
|
|
78%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
}
|
|
@keyframes line8
|
|
{
|
|
0%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
40%
|
|
{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 0px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
42%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 45px;
|
|
left: 135px;
|
|
}
|
|
78%
|
|
{
|
|
width: 14px;
|
|
height: 50px;
|
|
border-radius: 7px;
|
|
top: 45px;
|
|
left: 135px;
|
|
}
|
|
80%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
100%
|
|
{
|
|
width: 14px;
|
|
height: 0px;
|
|
border-radius: 7px;
|
|
left:90px;
|
|
top:70px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<br><br>
|
|
<div id="logo">
|
|
<div id="pot1"></div>
|
|
<div id="pot2"></div>
|
|
<div id="pot3"></div>
|
|
<div id="line1"></div>
|
|
<div id="line2"></div>
|
|
<div id="line3"></div>
|
|
<div id="line4"></div>
|
|
<div id="line5"></div>
|
|
<div id="line6"></div>
|
|
<div id="line7"></div>
|
|
<div id="line8"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |