元素邊框旋轉

-5

我有2個元素這樣的：元素邊框旋轉

<div class="element"><span></span></div>

元素必須有邊框圓角（CSS）和懸停邊界必須虛線（CSS）和旋轉，但跨度shoulde是靜態的。任何幫助？

@keyframes rotate { 
 
    from { 
 
    transform: rotate(0); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes rotate { 
 
    from { 
 
    -moz-transform: rotate(0); 
 
    } 
 
    to { 
 
    -moz-transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes rotate { 
 
    from { 
 
    -webkit-transform: rotate(0); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
.element { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ededed; 
 
    color: @fff; 
 

 
} 
 
.element:hover { 
 
    animation: rotate 2s infinite linear; 
 
    -moz-animation: rotate 2s infinite linear; 
 
    -webkit-animation: rotate 2s infinite linear; 
 
}

<div class="element"><span>1</span> 
 
</div>

來源

2015-09-11 Александр

你是什麼意思的旋轉？你的意思是邊界的破折號應該圍繞元素移動嗎？ – Andy

邊框中的破折號應該圍繞元素移動，是的。 –

這是測試代碼。我如何得到，該跨度不移動div？ –

.element { 
 
    width: 250px; 
 
    height: 250px; 
 
    border:3px solid grey; 
 
    border-radius:50%; 
 
    margin: 25px auto; 
 
    line-height: 250px; 
 
    text-align: center; 
 
} 
 

 
.element:hover { 
 
    border-style:dashed; 
 
    animation: spin 10s infinite linear; 
 
} 
 

 
.element:hover span { 
 
    animation: spin 10s infinite reverse linear; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
} 
 

 
@keyframes spin { 
 
    100% { transform: rotate(1turn); } 
 
}

<div class="element"><span>Not Spinning On Hover</span></div>

來源

2015-09-11 10:48:30

@Александр我認爲這不會工作，如果內容（不旋轉..）不在中間，我從元素中刪除'line-height'，在這裏你可以看到結果 - http://jsfiddle.net/3ptqvrze/ –

那麼你必須提供你的實際代碼，但原則是一樣的。 –

這個變種很酷。旋轉和反轉旋轉適合我 –

我相信this codepen有你需要的結果。但是，此方法在<div>內需要額外的<span>元素。

來源

2015-09-11 11:03:06 eggnukes

這很有趣，但我需要另一個。向上看，旋轉並反轉，這正是我需要的。 –

元素邊框旋轉

回答

相關問題