Как редактировать через CSS

Question

@keyframes rotate {
0% {
    transform: rotate(0deg);
    box-shadow: 0.1vh 0.2vh 0.2vh #6200ff;
    // здесь нужно как-то редактировать <span>

}
50% {
    transform: rotate(180deg);
    box-shadow: 0.1vh 0.2vh 0.2vh #00ffbf;
    // здесь нужно как-то редактировать <span>
}
100% {
    transform: rotate(360deg);
    box-shadow: 0.1vh 0.2vh 0.2vh #e23004;
    //здесь нужно как-то редактировать <span>
}
}

<span class="loading">Loading...</span>

Answer 1

Примерно так span анимируется:

html {
  min-height: 100%;
}

body {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
}

@keyframes rotate {
  0% {
    opacity: 0;
  }
  25% {
    opacity: .5;
  }
  50% {
    opacity: 1
  }
  75% {
    opacity: .5
  }
  100% {
    opacity: 0;
  }
}

.loading {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

<span class="loading">Loading...</span>

Меняем слово:

const spn = document.getElementById("loading");

const id = setInterval(() => {
  spn.textContent = spn.textContent === 'Loading...' ? 'Not loading' : 'Loading...';
}, 1000);

html{
  height: 100%;
}

body{
  display: grid;
  height: 100vh;
  justify-content: center;
  align-content: center;
}

<span class="loading" id="loading">Loading...</span>

БЛОГ НА HUSL

Как редактировать через CSS

Ответы (1 шт):