CSS旋

Question

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

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>

Answer 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>