css - 在悬停时使用 CSS 从图像中滑出文本

Question

我正在努力获得“我有空!”这句话。当我将鼠标悬停在小“+”图像上时，从左侧滑出。我在 Google 上找到的内容没有帮助。

之前 -

我希望它在悬停时做什么

我也想让那个小“+”号在悬停时也转向侧面，但我想我自己有一个想法如何做到这一点。不过不介意帮忙:)

如果我可以只用 CSS/HTML 完成所有这些事情，那就太好了。我知道一些 jQuery，但我尽量避免使用它，因为 CSS 更简洁。

Answer 1

如果你想让它在不使用 jquery 的情况下旋转，只需使用 css3 动画属性:

这将使您的加号图标在悬停时旋转 360 度

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to { 
    -webkit-transform: rotate(0deg);
  }
}

@-moz-keyframes rotate {
  from 
  {
      -moz-transform: rotate(360deg);
  }
  to { 
    -moz-transform: rotate(0deg);
  }
}

.plusicon:hover
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.5s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name:             rotate; 
    -moz-animation-duration:         0.5s; 
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;
}

您还应该能够使用 -webkit-transition-duration: 1s; 将文本移出