10

Я хочу сделать шестиугольник, который имеет градиентную заливку границы, которая вращается.

Пример GIF:

enter image description here

Я попытался создать фигуру только с помощью CSS, но это не сработало, потому что теги :after и :before используют стили границ для создания фигуры, которых нет.

Я попытался использовать файл *.svg и загрузить его как background-image, но не смог изменить границу и добавить анимацию CSS для поворота границы.

Наконец я попытался вставить *.gif, но у него были проблемы, такие как белый ореол вокруг формы. Мой фон темный, так что это было очень заметно.

Так каков наилучший способ вставить такую фигуру с указанной анимацией?

P.S. Встроенный SVG не вариант, так как я хочу просто вставить форму, например:

<div id='hex'></div>   
1

2 ответа 2

12

Круг можно сделать так:

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, black, black 66%, transparent calc(66% + 1px)),
    radial-gradient(circle at 50%  3%, blue,  transparent 25%),
    radial-gradient(circle at  3% 50%, green, transparent 25%),
    radial-gradient(circle at 97% 50%, green, transparent 25%),
    radial-gradient(circle at 50% 97%, red,   transparent 25%);
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}
<div></div>

А теперь аналогично шестиугольник:

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  clip-path: polygon(50% -1%, 93% 22%, 93% 78%, 50% 101%, 7% 78%, 7% 22%);
  position: relative;
  overflow: hidden;
}

div::before, div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div::before {
  background:
    radial-gradient(circle at 50%  3%, blue,  transparent 25%),
    radial-gradient(circle at  3% 50%, green, transparent 25%),
    radial-gradient(circle at 97% 50%, green, transparent 25%),
    radial-gradient(circle at 50% 97%, red,   transparent 25%);
  animation: spin 5s linear infinite;
}

div::after {
  margin: .25em;
  background: black;
  clip-path: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}
<div></div>

Если хочется убрать разрывы, можно просто увеличить размер градиентов:

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  clip-path: polygon(50% -1%, 93% 22%, 93% 78%, 50% 101%, 7% 78%, 7% 22%);
  position: relative;
  overflow: hidden;
}

div::before, div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div::before {
  background:
    radial-gradient(circle at 50%  3%, blue,  transparent 60%),
    radial-gradient(circle at  3% 50%, green, transparent 60%),
    radial-gradient(circle at 97% 50%, green, transparent 60%),
    radial-gradient(circle at 50% 97%, red,   transparent 60%);
  animation: spin 5s linear infinite;
}

div::after {
  margin: .25em;
  background: black;
  clip-path: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}
<div></div>

А ещё можно увеличить количество цветов:

html, body {
  background: black;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  clip-path: polygon(50% -1%, 93% 22%, 93% 78%, 50% 101%, 7% 78%, 7% 22%);
  position: relative;
  overflow: hidden;
}

div::before, div::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div::before {
  background:
    radial-gradient(circle at 50%  3%, #0000FF, transparent 25%),
    radial-gradient(circle at  3% 50%, #00FF00, transparent 25%),
    radial-gradient(circle at 97% 50%, #FF00FF, transparent 25%),
    radial-gradient(circle at 50% 97%, #FF0000, transparent 25%),
    radial-gradient(circle at 75% 75%, #FFFF00, transparent 25%),
    radial-gradient(circle at 75% 25%, #32AA15, transparent 25%),
    radial-gradient(circle at 25% 25%, #F48024, transparent 25%),
    radial-gradient(circle at 25% 75%, #FFFFFF, transparent 25%);
  animation: spin 5s linear infinite;
}

div::after {
  margin: .25em;
  background: black;
  clip-path: inherit;
  border-radius: inherit;
}

@keyframes spin {
  from { transform: rotate(0)     }
  to   { transform: rotate(1turn) }
}
<div></div>

3
  • Потому что они в гифке присутствуют твоей. Если поменяешь у градиентов 25% на 50%, то разрывов не будет.
    – Qwertiy
    Commented 21 дек. 2019 в 17:26
  • и мне жалко твой красивый вариант терять, сделай дополнительный ответ без разрывов Commented 21 дек. 2019 в 17:30
  • 2
    @Alexandr_TT, добавил вариантов.
    – Qwertiy
    Commented 21 дек. 2019 в 17:43
8

Перевод ответа @Brett DeWoody на вопрос EnSO: CSS Hexagon with rotating border color

Вероятно, в этой ситуации лучше всего использовать анимированное GIF или SVG-решение.

Но, ради эксперимента, вот решение CSS.

Основная идея:

  1. Создайте элемент с шестиугольной clip-mask, чтобы получить шестиугольник

  2. Добавьте внутренний элемент и примените conical gradient - объяснения в этой статье CSSTricks о том, как это сделать. Поддержка браузерами

  3. Примените анимацию, чтобы элемент с коническим градиентом вращался

  4. Наложите другой, немного меньший, шестиугольник, чтобы создать свободное пространство в середине

Конечный эффект выглядит так, как будто граница с градиентом вращаются .

Это имеет некоторые очевидные недостатки.
Во-первых, он не прозрачен, поэтому необходимо установить цвет внутреннего шестиугольника, чтобы он соответствовал фону элементов, который будет работать только на сплошных цветах фона.

Большая проблема - поддержка браузерами. Свойство clip-path поддерживается не во всех браузерах.

.container {
  position: relative;
}

.clip {
  position: absolute;
  top: 0.50em;
  left: 0.50em;
  width: 8em;
  height: 8em;
  -webkit-clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  background-color: #ffffff;
}

.wheel,
.umbrella,
.color {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 9em;
  height: 9em;
}

.wheel {
  -webkit-clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 94% 23%, 94% 75%, 50% 100%, 5% 75%, 5% 25%);
  width: 9em;
  height: 9em;
  position: relative;
}

.umbrella {
  position: relative;
  -webkit-filter: blur(1.4em);
  -webkit-transform: scale(1.15);
  will-change: transform;
  animation: 3s linear rotate;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

.color,
.color:nth-child(n+7):after {
  clip: rect(0, 9em, 9em, 4.5em);
}

.color:after,
.color:nth-child(n+7) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 4.5em);
  top: calc(50% - 4.5em);
  width: 9em;
  height: 9em;
  clip: rect(0, 4.5em, 9em, 0);
}

.color:nth-child(1):after {
  background-color: #9ED110;
  transform: rotate(30deg);
  z-index: 12;
}

.color:nth-child(2):after {
  background-color: #50B517;
  transform: rotate(60deg);
  z-index: 11;
}

.color:nth-child(3):after {
  background-color: #179067;
  transform: rotate(90deg);
  z-index: 10;
}

.color:nth-child(4):after {
  background-color: #476EAF;
  transform: rotate(120deg);
  z-index: 9;
}

.color:nth-child(5):after {
  background-color: #9f49ac;
  transform: rotate(150deg);
  z-index: 8;
}

.color:nth-child(6):after {
  background-color: #CC42A2;
  transform: rotate(180deg);
  z-index: 7;
}

.color:nth-child(7):after {
  background-color: #FF3BA7;
  transform: rotate(180deg);
}

.color:nth-child(8):after {
  background-color: #FF5800;
  transform: rotate(210deg);
}

.color:nth-child(9):after {
  background-color: #FF8100;
  transform: rotate(240deg);
}

.color:nth-child(10):after {
  background-color: #FEAC00;
  transform: rotate(270deg);
}

.color:nth-child(11):after {
  background-color: #FFCC00;
  transform: rotate(300deg);
}

.color:nth-child(12):after {
  background-color: #EDE604;
  transform: rotate(330deg);
}
<div class="container">
  <div class="wheel">
    <ul class="umbrella">
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
      <li class="color"></li>
    </ul>
  </div>
  <div class="clip"></div>
</div>

4
  • 1. Что-то кода полно. 2. Вообще не похоже на гифку из вопроса.
    – Qwertiy
    Commented 21 дек. 2019 в 15:33
  • 1
    Как раз экспериментирую)
    – Qwertiy
    Commented 21 дек. 2019 в 15:39
  • Никаких конических градиентов)
    – Qwertiy
    Commented 21 дек. 2019 в 15:44
  • Я нахимичил шестиугольник. Можно углы поаккуратнее просчитать, но в целом вроде хорошо.
    – Qwertiy
    Commented 21 дек. 2019 в 16:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.