generated from gitea_admin/default
33 lines
1.1 KiB
SCSS
33 lines
1.1 KiB
SCSS
.bg-orbs {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
//transform: translateZ(0);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
//filter: blur(3px);
|
|
opacity: 0.5;
|
|
//will-change: transform;
|
|
//transform: translate3d(0,0,0);
|
|
|
|
//background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
|
|
background: red;
|
|
}
|
|
|
|
.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
|
|
.orb--2 { width: 320px; height: 320px; top: 6%; left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
|
|
|
|
//@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
|
|
//@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
|
|
//@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
|
|
//@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
|
|
//@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
|
|
//@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.orb { animation: none !important; }
|
|
} |