113 lines
2.0 KiB
CSS
113 lines
2.0 KiB
CSS
#root {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
* body {
|
|
margin: 0;
|
|
/* cursor:none; */
|
|
overflow-y: none;
|
|
overflow-x: none;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.wheel {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
opacity: 0.2;
|
|
img {
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.logo {
|
|
display: none;
|
|
position: absolute;
|
|
top: 150px;
|
|
left: 500px;
|
|
|
|
opacity: 1;
|
|
img {
|
|
width: 600px;
|
|
animation: bounce 0.4s infinite cubic-bezier(0.71, 1.94, 0.5, 0.61);
|
|
}
|
|
}
|
|
|
|
.item {
|
|
width: 152px;
|
|
height: 152px;
|
|
position: absolute;
|
|
top: 75px;
|
|
left: 75px;
|
|
background: linear-gradient(white, rgb(48, 48, 48)) padding-box,
|
|
linear-gradient(to bottom, rgb(255, 255, 255), rgb(48, 48, 48)) border-box;
|
|
border-radius: 50em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.borderOut {
|
|
width: 150px;
|
|
height: 150px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(white, white) padding-box,
|
|
linear-gradient(to bottom, rgb(110, 110, 110), rgb(48, 48, 48)) border-box;
|
|
border-radius: 50em;
|
|
border: 10px solid transparent;
|
|
.borderIn {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(white, white) padding-box,
|
|
linear-gradient(to bottom, rgb(110, 110, 110), rgb(255, 255, 255))
|
|
border-box;
|
|
border: 2px solid transparent;
|
|
border-radius: 50em;
|
|
.background{
|
|
background-image: url('./images/scanline.jpg');
|
|
background-position: center;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|