Как сделать кривую форму с градиентом и анимацией смены формы?

@Gvizl · Регистрация: 31.01.2014

Студворк — интернет-сервис помощи студентам

Как сделать кривую форму с градиентом и анимацией?
Нужно на сайте на пол ширины экрана сделать такую форму с градиентом

И анимацию, что бы она плавно меняла форму и цвета градиента при наведении мыши?

Добавлено через 39 минут
Кривую форму типа такой

@Gvizl · 11.02.2019, 20:03 **[ТС]**

Прикрепил вид формы.

Я попробовал clip-path и background: linear-gradient но они не реагирут на плавность transition - форма и цвета меняются резко.

CSS

   .mod { 
    transition: 5s;
        -webkit-clip-path: polygon(20% 39%, 33% 51%, 56% 58%, 69% 100%, 25% 100%, 0 100%, 0 33%);
        clip-path: polygon(20% 39%, 33% 51%, 56% 58%, 69% 100%, 25% 100%, 0 100%, 0 33%);
            width: 300px;
      height: 300px;
 
        background: red;
   }
   
   .mod:hover {
        -webkit-clip-path: polygon(0 38%, 0% 100%, 100% 100%);
        clip-path: polygon(0 38%, 0% 100%, 100% 100%);
        background: linear-gradient(270deg, #09f3b7, #c3ff01);
        background: blue;
   }

@Gvizl · 11.02.2019, 23:27 **[ТС]**

Попробовал такой вариант - работает, но цвет меняется не плавно и после анимации форма резко возвращается к первоначальной.

CSS

  .mod { 
      clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
      background: linear-gradient(to top, #fefcea, #f1da36);
      display: inline-block;
      width: 250px;
      height: 250px;
      
   }
   
   .mod:hover {
        animation: polygons 4s alternate;
   }
   
   @keyframes polygons {
      100% {
        clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
                 background: linear-gradient(to top, red, blue);
      }
    }

Добавлено через 2 часа 31 минуту

Сделал
Готовое решение
https://codepen.io/kirill-golybev/pen/LqmQoy

Сам полигон собирал тут
http://www.cssplant.com/clip-path-generator

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 464
		1
	Как сделать кривую форму с градиентом и анимацией смены формы? 11.02.2019, 20:01. Показов 1450. Ответов 2 Метки нет (Все метки) Как сделать кривую форму с градиентом и анимацией? Нужно на сайте на пол ширины экрана сделать такую форму с градиентом И анимацию, что бы она плавно меняла форму и цвета градиента при наведении мыши? Добавлено через 39 минут Кривую форму типа такой 0

Опции темы