Question

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

这是代码的简短版本：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

要获取完整代码，请查看codpen demo http://codepen.io/andornagy/pen/ojBNZx

Answer 1

闪烁问题正在发生，因为当您将鼠标悬停在元素上时，元素会开始旋转。在旋转了一些x度之后，元素将旋转到一定程度并且元素上的鼠标/光标不再存在。这就是闪烁发生的原因。

与上面的相比，我觉得使用包装器（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。

在悬停

2 个答案: