純粋なcss3で記述された回転タグクラウドが必要でした。 すぐに予約しますが、問題を解決することは部分的にしかできませんでした。 より良いものを見つけようとする試みは失敗に終わり、かつてはHabréについての質問さえ公開しました。
実際、私が得たものは次のとおりです。
github.com/paratrooper5730/css3AnimatedTagcloud （コード）
3611.livejournal.com （例のある雑誌）。
アニメーションを作成するために、オブジェクトの初期、最終、およびオプションで中間プロパティを示す@keyframesルールが作成されます。 オブジェクト自体については、プロパティanimation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-directionが指定されています。 したがって、オブジェクトにどの変換が、どの速度で、どの方向に発生するかが決定されます。 このテーマに関する多くのトレーニングリソースがあります。w3schools.comを使用しました。
すぐに私がつまずいた制限に移ります。
単一のオブジェクトのanimation-nameプロパティでは、複数の@keyframesを指定できますが、それらは同時に実行されます-10秒の周期で1つの変換と5の周期で同時に別の変換をループすることはできません。
アニメーションタイミング機能の機能は非常に限られています。 理論的には、@ keyframesで多数の中間状態を使用してオブジェクトの動作を登録できます。 しかし、実際には、アニメーションはぎくしゃくして単純でした。
タスクを単純化する必要がありました。クラウドの「遠い」部分は見えず、要素は存在しないことから現れ、そこにも行きます。
これには、2つの変換を使用します。
これは、上から下への移動を担当します。
@keyframes tagmove{
from { top:-80px; }
to { top:80px; }
}
そしてここにあります-背景から前面および背面へのタグの「フローティング」
@keyframes coloring {
from { opacity: 0; }
50% { opacity: 1; }
to { opacity: 0; }
}
クラウドを均一で美しいものにするには、さまざまな要素のアニメーション期間とアニメーション遅延パラメーターを調整する必要があります。 そこに書かれている値は、ランダムに作られています。 また、混乱して絶対位置を使用することもできますが、私はそうしませんでした。 クラウド内のタグの初期位置は、水平方向および垂直方向に望ましい擬似ランダム散布を提供します。
おそらくそれだけです。 より良い方法についてのアドバイスを喜んでいます