Избиение "загрузка" изумительно!

внешний интерфейс CSS
Избиение "загрузка" изумительно!

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

Комментарий

  • Подарки от счастливого розыгрыша: 100 копий, официально предоставленных Nuggets, включая значки Nuggets, тапочки, кружки, холщовые сумки и т. д., распределенные случайным образом.
  • Удачное время розыгрыша: после окончания мероприятия «Звезда эксплуатации» ожидается, что в течение 3 рабочих дней официальный представитель проведет лотерею в области комментариев всех статей мероприятия, соответствующих правилам.
  • Метод розыгрыша: официальный случайный розыгрыш Nuggets + ручная проверка
  • Содержание комментария: Комментарии, предложения, обсуждения и т. д., относящиеся к содержанию статьи, общие комментарии, такие как «наступление» и «обучение», не могут быть награждены.

предисловие

Чтобы уточнить факт:Загрузка, задействованная в этой серии, собрана и не реализована автором.Эта статья занимается только парсингом CSS. Если вам это не нравится, не распыляйте! ! !.

Ставь лайк и проси бесплатный лайк

Зачем писать такую ​​статью? Когда мы обычно разрабатываем, мы сталкиваемся с загрузкой, то ли в UI-фреймворке, то ли Baidu, а потом CV в проект? Однако, когда вы это осознаете сами, у вас не будет ни малейшего представления. Со временем я стал CV-инженером. В этой статье объясняются идеи различных способов загрузки, надеюсь, каждый сможет их не только использовать, но и писать.Практика приносит истинное знание.

Эта статья только знакомитзагрузка текста загрузка. Другие будут рассмотрены в других статьях.

loader-1

реализовать логику

Присмотритесь: цвет текста меняется снизу вверх. Что-то вроде эффекта водной ряби. Но реализация на самом деле очень проста. Позвольте мне сначала показать вам пример.

div{
  font-size:30px;
  height:20px;
  overflow: hidden;
}
<div>content</div>

Это окончательный эффект: текст появляется только наполовину.Таким образом, идеи каждого выйдут наружу. Разве это не до тех пор, пока есть два перекрывающихся div с красным словом и белым словом. Можно ли добиться такого эффекта, используя анимацию для постепенного уменьшения высоты белого слова div? Да, оно может.

Однако мы можем сделать это только с одним div. :after или :before также могут это сделать.

Как должна быть оформлена анимация, на самом деле довольно просто установить высоту от 100% до 0.

  @keyframes loaderHeight {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }

полный код

Сначала определите цвет текста с красной основой.

.loader-1 {
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FF3D00;
    letter-spacing: 2px;
    position: relative;
}
<span class="loader-1">Loading</span>

Затем используйте :after, чтобы добавить верхний слой.

.loader-1::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 50%;
    overflow: hidden;
    animation: loaderHeight 6s linear infinite;
}

Это эффект высоты 50%. С эффектом анимации он был показан в начале.

loader-2

реализовать логику

Самое простое: лаодер-1 снизу вверх, это слева направо, разве это не связано с шириной?

Но здесь есть еще один момент. Это эффект текста. Основной текст затенен. Он выглядит пустым посередине, но это не так, просто цвет фона совпадает с цветом самого текста. Поменял цвет и стало понятно.

Тень текста в CSS называется text-shadow.

text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;

Здесь анимация очень простая, загрузчик-1 управляет высотой, а здесь — шириной.

  @keyframes loderWidth {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

полный код

.loader-2{
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #263238;
    text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;
    letter-spacing: 2px;
    position: relative;
}
<span class="loader-2">Loading </span>

.loader-2::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: loderWidth 6s linear infinite;
}

loader-3

Это самая креативная текстовая загрузка, которую я когда-либо видел! ! !

реализовать логику

Внимательное наблюдение, есть несколько моментов, на которые следует обратить особое внимание.

  • Буква Л, движущаяся заглавная Л, вы считаете угол неестественным, на самом деле буква И вверху не Л, а отдельная, просто на верхнем слое.
  • Буква I, внимательно посмотрите на букву I за ней, она динамично меняется, но ее движение — это не все движение, движется только верхняя часть.
  • Мяч: Мяч находится в движении.Когда мяч достигает положения буквы, буква будет двигаться.

Наконец я разделил его.

Разложение окончено, давайте изучим, как это сделать. Мы не рассматриваем другие вещи, такие как добавление div, мы просто используем :after и :before для этого. Некоторые люди здесь могут сказать, у вас есть четыре лишних, как добиться только двух меток? Очень просто, сам элемент действительно только один, но элемент может добавить много контента. Такие как границы, тени и тому подобное.

Говоря об этом, есть немного размышлений?Посмотрите, можно ли реализовать 1 и 2 с тенями, а 3 и 4 можно реализовать с после и до.

полный код

Пространство используется здесь, чтобы занять место.

<span class="loader-3">Load&nbsp;ng </span>
.loader-3 {
  color: #FFF;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
}

ниже до

  .loader-3::before {
    content: "";
    position: absolute;
    right: 70px;
    bottom: 10px;
    height: 28px;
    width: 5.15px;
    background: currentColor;
    animation: loaderL 1s linear infinite alternate;

  }

Эффект следующий, видно что 3 получилось, а 1 и 2 не появились, это потому что мы не добавили тени.С этой анимацией мы можем увидеть эффект.

  @keyframes loaderL {
    0% {
      box-shadow: 0 -6px, -122.9px -8px;
    }
    25%, 75% {
      box-shadow: 0 0px, -122.9px -8px;
    }
    100% {
      box-shadow: 0 0px, -122.9px -16px;
    }
  }

добавить мяч

.loader-3::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: red;
    animation: animloader113 1s linear infinite alternate;
  }

Наконец, добавьте анимацию мяча.

 @keyframes animloader113 {
    0% {
      transform: translate(0px, 0px) scaleX(1);
    }
    14% {
      transform: translate(-12px, -16px) scaleX(1.05);
    }
    28% {
      transform: translate(-27px, -28px) scaleX(1.07);
    }
    42% {
      transform: translate(-46px, -35px) scaleX(1.1);
    }
    57% {
      transform: translate(-70px, -37px) scaleX(1.1);
    }
    71% {
      transform: translate(-94px, -32px) scaleX(1.07);
    }
    85% {
      transform: translate(-111px, -22px) scaleX(1.05);
    }
    100% {
      transform: translate(-125px, -9px) scaleX(1);
    }
  }

loader-4

реализовать логику

Смотрите внимательно, две точки;

  • Текст наклонен в заштрихованном состоянии.
  • текст размыт

Перекос в CSS: transform: skew()

Размытие CSS: фильтр размытия по Гауссу: размытие (0px)

полный код

<span class="loader-4">Loading </span>
.loader-119 {
    font-size: 48px;
    letter-spacing: 2px;
    color: #FFF;
    animation: loader4 1s ease-in infinite alternate;
}

анимация

 @-webkit-keyframes loader4 {
    0% {
      filter: blur(0px);
      transform: skew(0deg);
    }
    100% {
      filter: blur(3px);
      transform: skew(-4deg);
    }
  }
Категории