Skip to main content

一个很不错的css风格 适用于 uptime-kuma

  1. 一个很不错的css风格 适用于 uptime-kuma

    https://status.nanyaterus.com/

    #Design #Script 

    .title-flex {
  color: #ECF9FF !important;
}

.description[data-v-7d4a7f28] {
  text-align: center !important;
  font-size: 18px;
  font-weight: 900;
  color: #ECF9FF;
}

.overall-status[data-v-3bcb04ac] {
   text-align: center !important;
 }

/* BG Animation */
body {
      background-size: 400% 400%;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: space-evenly;
 position: relative;
 overflow-x: hidden;
}

body::before,
body::after {
 content: "";
 width: 60vmax;
 height: 53vmax;
 position: absolute;
 background: rgba(255, 255, 255, 0.07);
 left: -20vmin;
 top: -20vmin;
 animation: morph 15s linear infinite alternate, spin 20s linear infinite;
 z-index: 1;
 will-change: border-radius, transform;
 pointer-events: none;
}

body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -13vmin;
    top: auto;
    bottom: 10;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 20% 20%;
}

@-moz-keyframes Gradient {
 0% {
  background-position: 0 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0 50%
 }
}

@keyframes Gradient {
 0% {
  background-position: 0 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0 50%
 }
}

@keyframes morph {
  0% {
    border-radius: 100% 60% 60% 40% / 70% 30% 70% 30%; }
  100% {
    border-radius: 40% 60%; }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
OKHK