mirror of
https://github.com/MrEidam/PetPet.git
synced 2026-04-17 15:43:31 +00:00
109 lines
2.2 KiB
CSS
109 lines
2.2 KiB
CSS
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background: #333;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#blob{
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 500px;
|
|
height: 500px;
|
|
background: #52fd30;
|
|
pointer-events: none;
|
|
clip-path: polygon(48% 2%, 60% 18%, 77% 10%, 86% 14%, 91% 30%, 82% 36%, 73% 41%, 81% 51%, 90% 55%, 94% 63%, 95% 82%, 94% 86%, 81% 94%, 65% 90%, 55% 82%, 45% 85%, 25% 100%, 23% 100%, 5% 92%, 1% 82%, 0% 70%, 6% 68%, 14% 61%, 19% 60%, 25% 61%, 29% 53%, 23% 48%, 12% 48%, 6% 34%, 6% 20%, 8% 12%, 16% 5%, 22% 13%, 26% 18%, 30% 13%, 34% 6%, 40% 3%);
|
|
animation: rgb 5s linear infinite;
|
|
transition: .15s;
|
|
}
|
|
#blob::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -50%;
|
|
width: 50vw;
|
|
height: 50vh;
|
|
background: #0b7901;
|
|
z-index: 2;
|
|
filter: blur(150px);
|
|
}
|
|
#blur{
|
|
position: absolute;
|
|
z-index: 2;
|
|
min-height: 100vh;
|
|
min-width: 100vw;
|
|
backdrop-filter: blur(125px);
|
|
}
|
|
@keyframes rgb{
|
|
from {
|
|
filter: hue-rotate(0deg);
|
|
transform: translate(-50%, -50%) rotate(0deg) scaleX(1.5);
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) rotate(180deg) scaleX(.5);
|
|
}
|
|
to {
|
|
filter: hue-rotate(360deg);
|
|
transform: translate(-50%, -50%) rotate(360deg) scaleX(1.5);
|
|
}
|
|
}
|
|
|
|
#home{
|
|
z-index: 69;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 25px 0 0 0;
|
|
background: #555;
|
|
}
|
|
|
|
.game{
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 200px;
|
|
height: 150px;
|
|
border-radius: 10px;
|
|
margin: 1rem;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
inset 5px 5px 15px #aaa,
|
|
5px 5px 15px #555;
|
|
}
|
|
|
|
.game img{
|
|
transition: .5s;
|
|
width: 200px;
|
|
height: 150px;
|
|
}
|
|
|
|
.game:hover img{
|
|
transition: .25s;
|
|
transform: scale(1.25);
|
|
}
|
|
|
|
@media screen and (max-width: 500px){
|
|
body{
|
|
overflow: auto;
|
|
}
|
|
#blob{
|
|
display: none;
|
|
}
|
|
} |