剪辑路径更改时的悬停过渡

Question

使用此代码，悬停效果有效，右下角消失但没有过渡，有什么问题吗？

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

Answer 1

您需要添加一个初始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>