58 lines
940 B
CSS
58 lines
940 B
CSS
|
#logo svg {
|
||
|
|
height: 70px;
|
||
|
|
width: 70px;
|
||
|
|
}
|
||
|
|
#logo svg path {
|
||
|
|
stroke: black;
|
||
|
|
}
|
||
|
|
#light {
|
||
|
|
background: red;
|
||
|
|
box-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
|
||
|
|
border-radius: 50%;
|
||
|
|
height: 80px;
|
||
|
|
width: 80px;
|
||
|
|
}
|
||
|
|
#light, #logo svg {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
animation: swing 4s ease-in-out infinite, spin 2s linear infinite;
|
||
|
|
}
|
||
|
|
@keyframes swing {
|
||
|
|
0% {
|
||
|
|
left: 90%;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
left: 10%;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
left: 90%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes spin {
|
||
|
|
0% {
|
||
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=checkbox] {
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
margin: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
#controls {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
input[type=checkbox]:checked ~ #controls {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
#reload {
|
||
|
|
display: none;
|
||
|
|
}
|