Plik 3/12 – css/splash.css
/* ==========================================
M PLATFORM
splash.css
Wersja: 0.1.0
========================================== */
#splash{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:var(--bg);
z-index:9999;
transition:opacity .8s ease;
}
/* LOGO */
.mLogo{
position:relative;
width:140px;
height:140px;
display:flex;
justify-content:center;
align-items:center;
}
.mLetter{
font-family:'Orbitron',sans-serif;
font-size:84px;
font-weight:400;
letter-spacing:6px;
color:white;
animation:mPulse 3s ease-in-out infinite;
}
/* KULKI */
.orbit{
position:absolute;
width:9px;
height:9px;
border-radius:50%;
background:white;
box-shadow:
0 0 14px rgba(255,255,255,.9);
}
.orbit:nth-child(2){
animation:orbit1 3.6s linear infinite;
}
.orbit:nth-child(3){
animation:orbit2 4.6s linear infinite;
}
.orbit:nth-child(4){
animation:orbit3 5.8s linear infinite;
}
/* PULS M */
@keyframes mPulse{
0%,100%{
opacity:.85;
transform:scale(1);
}
50%{
opacity:1;
transform:scale(1.03);
}
}
/* ORBITY */
@keyframes orbit1{
from{
transform:
rotate(0deg)
translateX(46px)
rotate(0deg);
}
to{
transform:
rotate(360deg)
translateX(46px)
rotate(-360deg);
}
}
@keyframes orbit2{
from{
transform:
rotate(120deg)
translateX(52px)
rotate(-120deg);
}
to{
transform:
rotate(480deg)
translateX(52px)
rotate(-480deg);
}
}
@keyframes orbit3{
from{
transform:
rotate(240deg)
translateX(42px)
rotate(-240deg);
}
to{
transform:
rotate(600deg)
translateX(42px)
rotate(-600deg);
}
}