おかげさまで、何か助けていただきありがとうございます。CSSのアニメーションは、ホバリングから始まり、次に停止します。
私は好きなものを見つけるためにいくつかの効果と協力し、このサイトに出くわしてきた： https://www.marieforleo.com/
ダウン第三項（黒BG）は「何が」下線の単語を持っている、としたときロールオーバーすると、その単語がさまざまな他の単語に変わるシーケンスが設定されます。
私は関連するチュートリアルを見つけようとしましたが、運はありませんでした。 css3を単独で使うかjqueryを使うかによって、誰かがこの効果を達成する方法を指すことができるかどうかを知りたい人はいらっしゃいますか？理想的には、アニメーションは「単語オプション」の最後に達した後に停止します。
ありがとうございます！ここで
は、純粋な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>こんにちはアジズ、非常に迅速な返信のおかげで！これは素晴らしいスタートです。毎回同じ順序で表示するのではなく、結果をランダム化する方法はありますか？ –
他の1つの注記 - 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
}
}
これは、$ wordsリストから1と単語リストの長さの間のランダムな位置で単語を選択する必要があります。あなたの最初の言葉がコンテンツブロックから引き出されていることを前提としたこの言葉です。
私たちに何を試しましたか？ –
こんにちはSaurav、ありがとう！このタイプのコードは私の主な目的ではないので、私はほとんど私が見つけた他のものに適応してきました。私はこれらの作業（https://codyhouse.co/gem/css-animated-headlines/）を試してみましたが、それが好きでしたが、効果は私たちが必要とするものに対してはあまりにも邪魔でした。私もhttps://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/を試しましたが、ループアニメーションを止める方法を見つけることができませんでした。 これらの目的のために、私は、ホバー上で何かがよりうまくいくと気付き始めました。これは私が投稿した効果につながりました。それを超えて、私はどこから始めるべきかわからない。 –