rough draft of checkbox hack
This commit is contained in:
parent
17d96b86e0
commit
e615061555
|
@ -2,42 +2,57 @@
|
||||||
<head>
|
<head>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
#logo {
|
#logo {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
}
|
}
|
||||||
#light {
|
#light {
|
||||||
background: red;
|
background: red;
|
||||||
box-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
|
box-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
.swing {
|
.swing {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
animation: swing 4s ease-in-out infinite, spin 2s linear infinite;
|
animation: swing 4s ease-in-out infinite, spin 2s linear infinite;
|
||||||
}
|
}
|
||||||
@keyframes swing {
|
@keyframes swing {
|
||||||
0% {
|
0% {
|
||||||
left: 90%;
|
left: 90%;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
left: 10%;
|
left: 10%;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
left: 90%;
|
left: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
transform: translate(-50%, -50%) rotate(0deg);
|
transform: translate(-50%, -50%) rotate(0deg);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translate(-50%, -50%) rotate(360deg);
|
transform: translate(-50%, -50%) rotate(360deg);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
#controls {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
input[type=checkbox]:checked ~ #controls {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -59,5 +74,7 @@
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
<input type="checkbox">
|
||||||
|
<div id="controls"><a href="..">back</a></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue