容器悬停时的css旋转答案

【问题标题】：css spin on hover of container容器悬停时的css旋转
【发布时间】：2017-09-15 19:22:58
【问题描述】：

当您将鼠标悬停在容器 div.logo 上时，我希望 i.spin 动画

HTML

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin:hover {
  animation: spin 450ms;
  animation-timing-function: linear;
}

<div class="logo">
  <i class="fa fa-envelope-o spin" aria-hidden="true"></i> D<span>e</span>trevnoc
</div>

【问题讨论】：

标签： css hover containers

【解决方案1】：

你想要这样的东西吗？

不要在较小的 icon 上观察悬停，而是将悬停放在具有类 icon 的父级上，并添加悬停动画以旋转。请参考下面的 CSS。

.logo:hover > .spin {
  animation: spin 450ms;
  animation-timing-function: linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.logo:hover > .spin {
  animation: spin 450ms;
  animation-timing-function: linear;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="logo">
  <i class="fa fa-envelope-o spin" aria-hidden="true"></i> <span>De</span>trevnoc
</div>

【讨论】：

就是这样！ ".logo:hover > .spin {" 是我要找的。span>