Plik 3/5 CSS/splash.css
/* ==========================================
M PLATFORM
splash.css
v0.1.0
========================================== */
#splash{
position:fixed;
inset:0;
background:var(--bg);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
opacity:1;
transition:opacity .8s ease;
}
/* ===========================
LOGO
=========================== */
.mLogo{
position:relative;
width:140px;
height:140px;
display:flex;
align-items:center;
justify-content:center;
}
/* litera M */
.mLetter{
font-family:'Orbitron',sans-serif;
font-size:82px;
font-weight:400;
letter-spacing:5px;
color:white;
line-height:1;
animation:
mGlow 3s ease-in-out infinite;
}
/* ===========================
KULKI
=========================== */
.orbit{
position:absolute;
width:9px;
height:9px;
border-radius:50%;
background:white;
box-shadow:
0 0 14px white;
}
/* każda inny ruch */
.orbit:nth-child(2){
animation:
orbitOne 4s linear infinite;
}
.orbit:nth-child(3){
animation:
orbitTwo 5s linear infinite;
}
.orbit:nth-child(4){
animation:
orbitThree 6s linear infinite;
}
/* ===========================
ANIMACJE
=========================== */
@keyframes mGlow{
0%,100%{
opacity:.8;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.04);
}
}
@keyframes orbitOne{
from{
transform:
rotate(0deg)
translateX(48px)
rotate(0deg);
}
to{
transform:
rotate(360deg)
translateX(48px)
rotate(-360deg);
}
}
@keyframes orbitTwo{
from{
transform:
rotate(120deg)
translateX(55px)
rotate(-120deg);
}
to{
transform:
rotate(480deg)
translateX(55px)
rotate(-480deg);
}
}
@keyframes orbitThree{
from{
transform:
rotate(240deg)
translateX(43px)
rotate(-240deg);
}
to{
transform:
rotate(600deg)
translateX(43px)
rotate(-600deg);
}
}