CSS の Steps() 関数を賢く使用して、ランダムなカードめくり効果を実現します。

フロップは誰もがよく知っているインタラクティブなエフェクトで、通常は宝くじのアクティビティに表示されます。それでは、JavaScript を使用せずにランダムなカード フロップ効果を実現することは可能でしょうか?カード フロップ効果にはまったく問題ありません。CSS にはランダム関数はありません。今日は、代替のインタラクティブ実装アイデアを共有します。

CSS 組み込みの「ランダム」関数はありません。Javascript のような Math.random() 関数もありません。 、乱数やランダムな色を生成できないことはありません。

上記の問題に基づいて、アイデアを変更して、複雑なアニメーションを通じて要素にランダムな効果を実現させる必要があります。実装原理により、カードがさまざまな状態をすばやく表示できるようになり、これらのカードが 1 秒以内にすべての 52 状態を循環できるようになります。ユーザーは各カードをクリックしてアニメーションを一時停止し、カードを反転させます。

オンライン プレビュー: https://codepen.io/quintiontang/pen/OJmJRrV

この計画の欠点は、回避できないことです。 3 枚の写真 カードは同じスートと顔で表示されます

概要

アニメーションを使用して要素がランダムに動作するように見せるというアイデアは、あまり面白くありませんそして少し予想外だったのですが、ほとんどのユーザーは、この効果が純粋な CSS によって実現されることに絶対に気づきません。

現在 CSS は、私たちが現在目にしているものをはるかに超えています。それがもたらすことができるものは、創造性によって決まります。私は常に、達成できないインタラクションなど存在せず、予期せぬインタラクションがあるだけだと信じてきました。 。

キーポイント

エフェクトは主に CSSanimation のアニメーション プロパティを使用して、アニメーション プロセスをカスタマイズしますrandomAnim、従来の input チェックボックス ラベル の組み合わせ、アニメーション コントローラ animation-play-state:paused および animation-play-state:running; をクリックすると、次のようになります。キー steps()。

steps() は、アニメーションまたはトランジション効果を 1 つの状態から次の状態に継続するのではなく、セグメントに分割できるようにするステップ関数 (timing-function) です。別の状態。この関数には 2 つのパラメータがあります。

• 最初のパラメータは、アニメーションを分割するセグメントの数を指定する正の値です。
• 2 番目のパラメータはオプションで、次の値に設定できます: start および end。ステップ変化が開始点または終了点で発生することを示します。各間隔。デフォルトは end です。たとえば、steps(1,start)、アニメーションは 1 つのステップに分割され、アニメーションが実行されるときの左端点が開始点となります; steps(1,end)、アニメーションは1ステップに分かれており、アニメーションを実行すると右側の終点となる部分が始まりとなります。

ステップ関数 (timing-function) は、アニメーション全体ではなく、2 つのキー フレームごとに使用されます。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がCSS の Steps() 関数を賢く使用して、ランダムなカードめくり効果を実現します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。