平滑的CSS在悬停上旋转动画

我创建了一个按钮，我希望它在鼠标悬停时旋转360度，并在悬停时旋转背景词360deg。到目前为止，它工作得很好，但如果你用鼠标慢慢走向它，它会闪烁。平滑的CSS在悬停上旋转动画

下面的代码的短版：

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

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

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

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

为完整的代码，检查codpen演示http://codepen.io/andornagy/pen/ojBNZx

来源

2015-09-29 Andor Nagy

这是因为当你旋转它时，你不再徘徊， –

如果你想让按钮一旦完成它的动画，就需要使用jQuery（或纯Javascript） - 如果这是一个选项 - 告诉我们... – Chris

这里就是它增加了只有当你徘徊在一个额外的伪元素的想法：

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。

来源

2015-09-29 12:00:36 Shikkediel

闪烁问题，是因为发生的事情，当你将鼠标悬停在元素，元素开始旋转。在旋转一些x度之后，该元素将旋转到一定程度，并且鼠标/光标不再在元素上。这是闪烁发生的原因。

与上面的比较，我觉得使用包装（div）并分析了我们可能需要多少宽度，我们将其设置为div。在div：hover元素上，我们可以执行转换。与现在相比，它提供了更好的结果。

这里是fiddle

.buttonHolder { 
    padding: 50px; 
} 

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

来源

2015-09-29 11:42:11 rajuGT

平滑的CSS在悬停上旋转动画

回答

相关问题