Два DIV для достижения эффекта сканирования радара

внешний интерфейс CSS

тема: есть дваDIV,следующим образом:

<div class="radar">
  <div class="fan"></div>
</div>

в,radarДобрыйDIVда200pxширина и высота,fanДобрыйDIVда100pxширина и высота.

Пожалуйста, используйтеCSSЗавершите эффект ниже.

radar.gif

🔥 Эффект совместим с современными популярными браузерами.

Я: ах! Это динамическая карта, чтобы получить имеющиеся вещиUIЭто сделано с движущейся картинкой, эта проблема решена, такой же остроумный, как и я!

flower.gif

Интервьюер: Когда выйдете, поверните налево, спасибо!

姚明.jpeg

Ближе к дому, в этом вопросе еще много пунктов знаний, давайте выучим их один за другим~

Ключевой кадр

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

Например, следующий код ключевого кадра:

div {
  animation-duration: 3s;
  animation-name: identifier;
  // more code
}
@keyframes identifier {
  from { top: 0; }
  to { top: 100px; }
}

DIVРасстояние от вершины0Измените положение на расстояние от вершины100pxположение, весь процесс требует3秒.

цветовой градиент

Веерообразный цветовой эффект — это процесс линейного градиента, мы можем пройтиlinear-gradientреализовать.

Например следующий код:

div {
  background: linear-gradient(to right, white, black);
  // more code
}

DIVЦвет фона градиента слева направо, от белого к черному;

Исследование косой функции

Конечно, можно сделать веерную форму для достижения эффекта, но стоимость реализации не так велика, какskewспуститься ~

Теперь давайте исказим квадрат напрямую.

// origin
div {
  width: 100px;
  height: 100px;
  background: blue;
}

// after
div {
  width: 100px;
  height: 100px;
  background: blue;
  transform: skew(-10deg);
}

Как показано на рисунке:

skew.png

::before ::after псевдоэлемент

Требования к предмету здесь очень четкие, дваDIV, если вы просто используете эти дваDIVДобавляя сам стиль, можно ли добиться эффекта?

::beforeСоздает псевдоэлемент, который будет первым элементом, соответствующим выбранному элементу.

::afterСоздает псевдоэлемент в качестве последнего элемента выбранных элементов.

::before 和 ::afterЭти два виртуальных элемента являются встроенными элементами по умолчанию и обычно работают вместе.contentСвойства для добавления контента.

Например:

div{
  width: 100px;
  height: 100px;
  background: red;
}

div::after {
  width: 100px;
  height: 100px;
  background: blue;
  display: block;
  content: '::after'
}

Если вы запустите приведенный выше код, вы получите上红下蓝дваDIV, и следующееDIVтакже содержит::afterшрифт.

Коробка-SIZING

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

мы обычно используемborder: 1px solid #eee;Сделанный.

Как всем известно, вопрошающий снова изрыгнул его.

мы устанавливаемdivШирина и высота есть50pxПосле этого добавьте границу поверх него.border: 1px solid #eee;, то на практике мы эквивалентны установке52pxширина и высота.

использоватьbox-sizing: border-box;может решить эту проблему;

div {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #eee;
  box-sizing: border-box;
}

Таким образом, полученные ширина и высота не изменятся, они по-прежнему50px.

Код реализации темы

Хорошо, все это сказано и сделано, давайте осознаем эффект следующей темы. следующим образомCSSКод:

.radar {
  overflow: hidden;
  position: relative;
  margin: 200px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #5ef2ff;
  box-sizing: border-box;
}

.radar::before {
  width: 100px; 
  height: 200px;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  box-sizing: border-box;
  border-left: 1px solid #5ef2ff;
}

.radar::after {
  width: 200px; 
  height: 100px;
  content: '';
  display: block;
  box-sizing: border-box;
  border-bottom: 1px solid #5ef2ff;
}

.fan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #5ef2ff;
  width: 100px;
  height: 100px;
}

.fan::after {
  content: "";
  width: 100px;
  height: 100px;
  display: block;
  box-sizing: border-box;
  position: relative;
  top: -50%;
  right: -50%;
  transform-origin: 0% 100%;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, transparent, #5ef2ff);
  border-image-slice: 3;
  background: transparent;
  background-image: linear-gradient(to right, transparent, #9bfdfd);
  animation: rotateAnimate 2s linear infinite;
}

@keyframes rotateAnimate {
  from {
    transform: rotate(0deg) skew(-10deg)
  }
  to {
    transform: rotate(360deg) skew(-10deg)
  }
}

Адрес онлайн-опытаДва DIV для достижения эффекта сканирования радара;Связанное хранилище исходного кодасклад.

Каково ваше решение этой проблемы?

Можете оставить сообщение ниже, учиться и поощрять друг друга~

Кодировать слова непросто. Может вам понравится, когда вы пройдете мимо? Заранее спасибо!

ε=ε=ε=┏(゜ロ゜;)┛

рекомендуется вамСоздайте свою визитную карточку GITHUBа такжеРазработайте простой апплет WeChat с нуля

Для получения дополнительной информации перейдите наjimmy github.

Категории