Question

我想制作一个圆圈，你可以将它悬停在它上面，然后它从图片1变为2.我可以这样做，但是当转换完成后，它会回到.circle类，而不是停留在第二张照片。

所以，无论如何都要让它保持在第二张图片，只要我仍然将鼠标悬停在图片上。
当我从鼠标中取出鼠标时，是否有办法让它从第二张图片更改为第一张图片？

.circle{
  width: 250px;
  height: 250px;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  border-radius: 50%;
  background: #333333;
  box-shadow: 10px 10px rgba(0,0,0,0.4); 
  -moz-box-shadow: 10px 10px rgba(0,0,0,0.4); 
  -webkit-box-shadow: 10px 10px rgba(0,0,0,0.4); 
  -o-box-shadow: 10px 10px rgba(0,0,0,0.4);}
}

.circle-:hover{
  -webkit-animation: second 2s; /* Chrome, Safari, Opera */
  animation: second 2s;
}

@-webkit-keyframes second {
  from {background: url("../images/circle-picture1");}
  to {background: url("../images/circle-picture2");}
}

Answer 1

将animation-fill-mode: forwards;及其前缀变体添加到.circle:hover类。

这会导致目标保留执行期间遇到的最后一个关键帧设置的计算值。＆＃34;

More info on MDN

悬停时，CSS Transition保持在100％

1 个答案: