Загрузка «Меча Ци» 🌪️

внешний интерфейс CSS
Загрузка «Меча Ци» 🌪️

Это 29-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

🙇 Предисловие

  • Мы всегда добавляем некоторые эффекты перехода, чтобы направлять пользователей при загрузке веб-страницы, сокращаем время белого экрана и можно использовать эффект загрузки.svgВы также можете использовать хороший компонент нашего пакета сегодня, чтобы поделиться своего рода "剑气«Эффект нагрузки.
  • Я считаю, что все знают эффект, глядя на обложку, так что давайте сразу к нему.

src=http___image.17173.com_bbs_v1_2012_12_01_1354372326576.gif&refer=http___image.17173.gif

🏋️‍♂️Список дел

  • форма меча
  • Меч Ци поворачивается
  • Комбинированный меч Ци

🚴 Просто сделай это

  • На самом деле, чтобы сделать такой эффект тщательно, это означает, что есть три кольцеобразных элемента, которые вращаются циклически.Нам нужно только разобрать одно кольцо, чтобы получить эффект, и, наконец, соединить три кольца.

форма меча

  • Присмотритесь к мечу ци, он имеет форму круглого серпа, разделенного пополам, и этот серп может быть сделан границами и закругленными углами.
  • Сначала подготовьте прототип энергии меча.
  <div class="sword">
    <span>
  </div>
  • Нам нужно только добавить границу в одном направлении к кругу, чтобы сделать форму полукруга, чтобы форма полукруга, похожая на Цзяньци, была завершена 🌪️.
.sword {
  position: relative;
  margin: 200px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.sword span{
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}
.sword :first-child{
  left: 0%;
  top: 0%;
  border-bottom: 3px solid #EFEFFA;
}

image.png

Меч Ци поворачивается

  • Потому что нам нужно, чтобы энергия меча постоянно вращалась, поэтому мы можем использоватьcssизanimationСвойство animation может добавить к нему анимацию само по себе.
  • animationСвойство — это сокращенное свойство, которое можно использовать для установки следующих свойств анимации:
    • animation-name: указывает имя ключевого кадра для привязки к селектору.
    • animation-duration: Анимация указывает, сколько секунд или миллисекунд требуется для завершения.
    • animation-timing-function: Установите, как анимация будет завершать цикл.
    • animation-delay: Установите интервал задержки перед началом анимации.
    • animation-iteration-count: определяет, сколько раз воспроизводится анимация.
    • animation-direction: Указывает, должна ли анимация воспроизводиться по очереди в обратном порядке.
    • animation-fill-mode: определяет стиль, применяемый к элементу, когда анимация не воспроизводится.
    • animation-play-state: Указывает, запущена анимация или приостановлена.
  • Более подробное изучение анимации может относиться кMDN 
...
.sword :first-child{
  ...
  animation: sword-one 1s linear infinite;
  ...
}
@keyframes sword-one {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
...
  • Мы можем дать постоянный циклzось0degприбыть360degАнимация вращения настроена на завершение бесконечного цикла каждую секунду Давайте посмотрим на эффект:

剑气1.gif

  • Далее пусть эта полуокружность обойдется отдельноxось иyВал также вращается под определенным углом, чтобы завершить вращение меча-ци.
...
@keyframes sword-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
...
  • Давайте посмотрим на готовый эффект:

剑气2.gif

Комбинированный меч Ци

  • В конце нам просто нужно сделать еще два剑气Просто соберите его.
<div class="sword">
    <span></span>
    <span></span>
    <span></span>
  </div>
  • для новых двухspanДобавьте анимацию и стили.
...
.sword :nth-child(2){
  right: 0%;
  top: 0%;
  animation: sword-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.sword :last-child{
  right: 0%;
  bottom: 0%;
  animation: sword-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes sword-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes sword-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
...
  • Таким образом, наш эффект загрузки ци меча завершен.Выше приведен весь код.Вы можете использовать его, если вам это нравится.
  • Посмотрим на окончательный результат~

剑气3.gif

👋 Напишите в конце

  • Прежде всего, спасибо, что заглянули сюда, на этот раз обмен剑气Эффект загрузки, я надеюсь, что это может помочь нуждающимся студентам.
  • Если вы считаете эту статью полезной, пожалуйста,🍉 Подписаться + Нравится + Избранное + Комментарий + Ретвитнуть 🍉Поддержите~~😛Ваша поддержка - самая большая мотивация для моего обновления.
  • Для получения дополнительной информации о внешнем интерфейсе вы можете обратить внимание на общедоступный номер:«Передний конец работает быстро»

Замечательный

Кнопка «Вода» 💧

Менеджер по продукту: Можете ли вы заставить облако слов двигаться?

Одна статья, чтобы выделить карусель карты echarts ⚡

Прочитав это, я не могу отличить перерисовку от перестановки, иди и побей меня 👊, сказал я! ! !

Категории