2

Получилось выполнить вращение градиента средствами SVG с помощью анимации атрибутов x1, x2, y1 y2

<animate attributeName="x1" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
    <animate attributeName="y1" values="0;1;1;0;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />

Но не получилось сделать это с помощью анимации градиентов CSS.

Вот мой SVG код анимации вращения градиентов с белой полосой:

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="320" height="320" viewBox="0 0 210 210" border="1">

  
 <defs>
<linearGradient id="Lg" x1="0" x2="0" y1="0" y2="1">
        <animate attributeName="x1" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y1" values="0;1;1;0;0" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <animate attributeName="x2" values="1;1;0;0;1" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <animate attributeName="y2" values="1;0;0;1;1" keyTimes="0;.25;.5;.75;1" dur="1s" repeatCount="indefinite" />
        <stop offset="0%" stop-color="#24bed2"/>
        <stop offset="50%" stop-color="white"/>
        <stop offset="100%" stop-color="#00C256"/>
      </linearGradient>
</defs>   
 
  <path fill="url(#Lg)" stroke="none"  id="hex_Out" d="m105 5 86.6 50 0 100L105 205 18.4 155l0-100zM105 20l73.6 42.5 0 85" />
  <path  fill="#00C256" stroke="white" stroke-width="2" id="hex_Ind" d="m105 20 73.6 42.5 0 85L105 190 31.4 147.5l0-85z" />
  </svg>
  </div>

Вопрос:

Как сделать вращение градиента с белой полосой с помощью CSS по краю элемента?

0

2 ответа 2

4

Чуть изменил ответ @Sevastopol' и всё заработало.

Работает только в Chromium браузерах

@property --deg {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

div {
  position: relative;
  width: 180px;
  height: 200px;
  background: #00C256;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(var(--deg, 0deg), #24bed2, white, #00C256);
  animation: ani 1s linear infinite;
}

div::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 140px;
  height: 160px;
  background: white;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

div::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  width: 136px;
  height: 156px;
  background: #00C256;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

@keyframes ani {
  0% {
    --deg: 0deg;
  }
  100% {
    --deg: 360deg;
  }
}
<div></div>

6
  • Попробуйте сделать кроссбраузерный вариант решения. И вы хотели изучать SVG, попробуйте сделать и вариант SVG. Я разместил этот вопрос именно в учебных целях и буду ждать ответа сколько понадобится времени 9 апр 2021 в 11:29
  • @Sevastopol' чем больше я буду применять эту технологию, тем быстрее она появится :D 9 апр 2021 в 12:12
  • 1
    @Sevastopol' надо дождаться, когда Houdini начнёт поддерживаться в Mozilla ishoudinireadyyet.com , тогда заработает, возможно. Сейчас там на рассмотрении многие приколюхи 9 апр 2021 в 12:16
  • 1
    У меня в лисе не работает.)
    – De.Minov
    9 апр 2021 в 12:47
  • @Sevastopol' я иногда дебажу чужой код ... есть для этого средства 9 апр 2021 в 13:34
4

Прежде чем ответить на этот вопрос, для начала нужно нарисовать такую фигуру, какая обозначена в вопросе - шестиугольник. Это мы можем сделать, например, с помощью свойства clip-path.

Градиент создаем с помощью универсального свойства background и функции linear-gradient().

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

div {
  position: relative; width: 180px; height: 200px; background: #00C256; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(0deg, #24bed2, white, #00C256);
  animation: ani 1s linear infinite;
}

div::before {content: ""; position: absolute; top: 20px; left: 20px; width: 140px; height: 160px; background: white; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);}
div::after {content: ""; position: absolute; top: 22px; left: 22px; width: 136px; height: 156px; background: #00C256; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);}

@keyframes ani {
  0% {
    background: linear-gradient(0deg, #24bed2, white, #00C256);
  }
  25% {
    background: linear-gradient(90deg, #24bed2, white, #00C256);
  }
  50% {
    background: linear-gradient(180deg, #24bed2, white, #00C256);
  }
  75% {
    background: linear-gradient(270deg, #24bed2, white, #00C256);
  }
  100% {
    background: linear-gradient(360deg, #24bed2, white, #00C256);
  }
}
<div></div>

Однако, такая анимация воспроизводит немного другой эффект в отличие от того, который продемонстрирован в вопросе. В таком случае нам нужна другая реализация. И, для того, чтобы добиться плавности такой анимации, учитывая ее работоспособность не только в Chromium браузерах, желательно не угол наклона градиентной линии менять, а использовать свойство transform и функцию rotate. Для этого создадим дополнительный элемент, к которому и применим такую анимацию. Пример:

div {
position: relative; overflow: hidden; width: 180px; height: 200px;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

div::before {content: ""; z-index: 2; position: absolute; top: 20px; left: 20px; width: 140px; height: 160px; background: white; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);}
div::after {content: ""; z-index: 2; position: absolute; top: 22px; left: 22px; width: 136px; height: 156px; background: #00C256; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);}

div>span {
  display: block; position: absolute; top: -10px; left: -10px; width: 200px; height: 220px;
  background: linear-gradient(0deg, #24bed2, white, #00C256);
  animation: ani 1s linear infinite;
}

@keyframes ani {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);;
  }
}
<div><span></span></div>

Таким образом мы можем применить подобную анимацию к любой фигуре. Например, как в ответе участника @Alexandr_TT к вопросу "Анимация градиента с перекрыванием одного цвета другим". Варианты с двойной звездой особенно заслуживают отдельного внимания.

1
  • Замечательно получилось! Проверил во всех современных браузерах, включая FF и даже Edge Подожду немного, так как зелёная галочка почему-то отбивает у людей давать свои ответы, но не забуду, кто первый дал кроссбраузерный, правильный ответ. Пока в другом месте (+) 9 апр 2021 в 12:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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