CSS動畫從懸停開始，然後停止

我已經與幾個影響工作找到我喜歡的東西，和整個本網站偶然發現： https://www.marieforleo.com/

第3款羽絨服（黑BG）有「什麼」強調這個詞，當你翻轉它，它引發了一個序列，其中該單詞變成了各種其他單詞。

我試着找到一個相關的教程，但沒有運氣。想知道是否有人能夠通過單獨的css3或者jquery來指出實現這種效果的方式。理想情況下，動畫在到達其「單詞選項」結尾後停止。

謝謝大家！

2016-12-18 Jordan Warner

告訴我們你試過了什麼？ –

嗨Saurav，謝謝！這種類型的代碼並不是我的主要工作，所以我主要是在調整我發現的其他東西。我嘗試過使用這些工具（https://codyhouse.co/gem/css-animated-headlines/）並喜歡它，但效果對於我們所需要的太乾擾。我也嘗試過https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/，但找不到一種停止循環動畫的方法，這使得它過分分散注意力。爲了這些目的，我開始意識到懸停的東西會更好地工作，這導致了我發佈的效果。除此之外，我不確定從哪裏開始。 –

這裏是用純CSS來做到這一點的一種方式：「動畫」僞元素的內容

.words::before { 
 
    content: "hello"; 
 
} 
 

 
.words:hover::before { 
 
    animation: rotateWords 5s; 
 
} 
 

 
@keyframes rotateWords { 
 
    20% { content: 'world' } 
 
    40% { content: 'foo' } 
 
    60% { content: 'bar' } 
 
    80% { content: 'lorem' } 
 
    100% { content: 'ipsum' } 
 
}

<span class="words"></span>

來源

2016-12-18 05:41:46 Aziz

嗨阿齊茲，感謝您的非常快速的回覆！這是一個很好的開始。任何方法來隨機化結果，而不是每次都以相同的順序顯示？ –

另一個注意事項 - 我在marieforleo.com上注意到頁面頂部的左上角徽標具有類似的效果。再次感謝您的快速幫助！ –

你可以使用JavaScript來隨機選擇一個單詞，並注入其上懸停。如果這不是你想要的，你可以在sass mixin中使用for循環。像這樣的東西應該工作。

@mixin randomword 

$words: word1, word2, word3; //array with desired words 

@for $i from 1 through length($words) { //this loops through the array 
    .words:hover { 
    content: nth($words,random(length($words)); //random number generator 
    } 
}

這項工作應在1之間和詞列表的長度的隨機位置選擇從$詞表中的單詞。這將假設你的初始單詞是從內容塊中提取的。

來源

2016-12-24 17:16:27

CSS動畫從懸停開始，然後停止

回答

相關問題