kevin/logo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mylogo

Browse Source
This commit is contained in:
无闻风
2026-06-15 12:20:48 +08:00
commit fc4ddf69fe
1 changed files with 702 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
logo.html
+702
View File
@@ -0,0 +1,702 @@
<!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>