CSS：在旋轉文本中旋轉字母？

我在頁面底部有一個旋轉句子懸停的「由Coindesk提供支持」。CSS：在旋轉文本中旋轉字母？

我把跨度周圍的字母，所以我可以單獨樣式。

我想向字母P中添加另一個微調控件類，以獲得旋轉文本中的旋轉字母。

.spinner:hover { 
    animation-play-state: running; 
    animation-duration: 5s; 
    animation-iteration-count:10; 
    animation-delay: 0s; 
    cursor:crosshair; 
}

我可以將模糊類添加到跨度，但添加微調器不會改變任何東西。我是否已經達到了CSS的極限，或者有什麼我可以嘗試的，不會緊張？謝謝。

來源

2016-06-29 RubyRube

P.S.包含大量代碼片段還是讓人們閱讀Codepen是最佳做法？ – RubyRube

你怎麼能懸停在這個速度旋轉的字母「p」？它只是用於測試嗎？ –

是的，格林先生很棘手。也許用戶可以懸停在P上，這會觸發文本旋轉+同時旋轉單個字母。他們會看到P開始移動，文本。如果我需要，我可以減慢動畫速度。我不知道開始谷歌搜索是什麼主題，是嵌套？ – RubyRube

span是內聯元素，並且變換不適用於它們。

將範圍的顯示屬性更改爲inline-block，它將起作用。

span.spinner { 
    display: inline-block; 
}

來源

2016-06-29 12:36:40 beercohol

這工作。在主文本停止旋轉後，單個字母實際上會觸發*。它看起來不錯，但我會尋找一個屬性，我現在可以按照設定的順序觸發事件。謝謝。 – RubyRube

CSS：在旋轉文本中旋轉字母？

回答

相關問題