Переход при наведении курсора на изменение пути клипа - PullRequest
Новая
       33

Переход при наведении курсора на изменение пути клипа

0 голосов
/ 23 февраля 2019

С этим кодом работает эффект наведения, правый нижний угол исчезает, но перехода нет, что-то не так?

.mydiv:hover{
      background-color: blue;
      clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
      transition: 0.5s ease;
 }

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Для свойства перехода необходимо установить значение class, если вы хотите использовать его для псевдокласса 

.mydiv {
  background: red;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: all 0.5s ease;
}

.mydiv:hover {
   background: blue;
   clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
 }
<div class="mydiv">
  Hello world
</div>
0 голосов
/ 23 февраля 2019

Вам необходимо добавить начальное определение clip-path для перехода между двумя состояниями: 

.box {
  background-color: blue;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: 0.5s ease;
  height:150px;
}

.box:hover {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
}
<div class="box">

</div>

Вы также можете сделать то же самое с фоном, и у вас будет лучшая поддержка: 

.box {
  background: 
    linear-gradient(blue,blue) left,
    linear-gradient(to bottom right,blue 49.5%,transparent 50%) right;
  background-size:100% 100%,0% 100%;
  background-repeat:no-repeat;
  transition: 0.5s ease;
  height:150px;
}

.box:hover {
  background-size:80.1% 100%,20% 100%;
}
<div class="box">

</div>
...