1

Тема: Поясніть за CSS

Прів. От треба розібратись, як працює ця штука.
Тут як би зрозуміло, що є квадратик, і в нього анімація круть-круть, але як бути з тими кутками? у них є невеличкий trail ефект, і от я з CSS не дуже знайомий, і не можу розібратись, як то воно зроблено.
То як воно зроблено?
http://codepen.io/anon/pen/RaJjqz

Подякували: leofun011

2

Re: Поясніть за CSS

збільшив розміри з 20 до 100, і все зрозумів

Подякували: 221VOLT1

3

Re: Поясніть за CSS

я тут збільшив час анімації, і не можу наздогнати знову, що і куди тут крутиться

4 Востаннє редагувалося leofun01 (24.04.2016 12:55:22)

Re: Поясніть за CSS

Я трохи змінив значення, щоб було видно, що відбувається.

.loading {
  /* голубий квадрат */
  position: relative;
  width: 100px;
  height: 100px;
  background: #0FF;

  /* крутить голубий квадрат */
  animation: 10s spin infinite;
  /* за вказаним "@keyframes spin"*/

  &::before,
  &::after {
    /* фіолетовий, білий */
    content: ""; /* для відображення */
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    /* за 5 секунд лінійно відхиляє
       проти годинникової стрілки, а
       потім ще 5 секунд за
       годинниковою стрілкою. */
    animation: 5s infinite alternate linear;
    /* alternate вказує, що по завершенню
       анімації, потрібно продовжити задом
       на перед, а потім знову з початку. */
  }
  &::before {
    /* фіолетовий квадрат */
    background: #F0F;

    /* змінює назву зі "spin" на "blur1" */
    animation-name: blur1;
  }
  &::after {
    /* білий квадрат */
    background: #FFF;

    /* змінює назву зі "spin" на "blur2" */
    animation-name: blur2;
  }
}

@keyframes spin {
  /* + за годинниковою стрілкою */
  to { transform: rotate(360deg) }
}

@keyframes blur1 {
  /* - проти годинникової стрілки */
  to { transform: rotate(-45deg) }
}
@keyframes blur2 {
  to { transform: rotate(-20deg) }
}

/* center it */
html { display: flex; height: 100%; }
body { margin: auto; background: #000; }
Подякували: FakiNyan, 0xDADA11C7, Tenevyk, Kasper5