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>