悬停时平滑 CSS 旋转动画

Question

我创建了一个按钮，我希望它在鼠标悬停时旋转 360 度，并在鼠标悬停时旋转反向词 360 度。到目前为止它运行良好，但如果你用鼠标慢慢靠近它，它会闪烁。

这是代码的简短版本：

.btn {
 display: block;
 margin: 60px auto;
 width: 250px;
 padding: 15px; 
 position: relative; 

 color: #3498db;
 font-weight: 300;
 font-size: 24px;
 text-decoration: none;
   
 border: 5px solid #3498db;
     
 transform: rotate(360deg);
 transition: all 0.5s;
 transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);
}

.btn-rotate:hover {
 transform: rotate(0deg);
 transition-delay: 0;
 transition: all 0.5s;
}

<a href="#" class="btn btn-rotate">I am a button!</a>

有关完整代码，请查看 codpen 演示 http://codepen.io/andornagy/pen/ojBNZx

Answer 1

出现闪烁问题是因为，当您将鼠标悬停在元素上时，元素开始旋转。旋转 x 度后，元素会 旋转到一定程度，并且 mouse/cursor 不再位于元素 上。这就是闪烁发生的原因。

对比上面那个，感觉用wrapper(div)，分析了可能需要多大的宽度，我们设置为div。在 div:hover 元素上，我们可以执行转换。与现在相比，它提供了更好的结果。

这是fiddle

.buttonHolder {
    padding: 50px;  
}

.buttonHolder:hover .btn-rotate {
    transform: rotate(360deg);
    transition-delay: 0;
    transition: all 0.6s;
}

Answer 2

这是一个想法，它仅在您悬停时添加一个额外的伪元素：

Demo

.btn:after {
  content: '';
  width: 300px;
  height: 150px;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:hover:after {
  display: block;
}

给它加一点背景色，这样可以更好地看到发生了什么...

为了最大程度的控制，我会求助于一些 JavaScript。

悬停时平滑 CSS 旋转动画

Smooth CSS rotate animation on hover

css

hover

css-selectors