CSS3 で落下オブジェクトを作成する
CSS を使用して、絶対配置と CSS3 アニメーションを使用して落下オブジェクトを作成する例
雪の例
CSS
ある年、私たちのサイトにあったクリスマスのテーマについて良いコメントがあったので、コードを共有することにしました。デザインは CSS のみを使用してページのスタイルを設定したため、プラグインを必要とせずにすべてのブラウザーで動作しました。
CSS アニメーションとは
アニメーションを使用すると、要素をあるスタイルから別のスタイルに徐々に変更できます。
CSS プロパティは何度でも変更できます。
CSS アニメーションを使用するには、最初にアニメーションのキーフレームをいくつか指定する必要があります。
キーフレームは、要素が特定の時点で持つスタイルを保持します。
すでに十分に説明されている記事を読んでも意味がないので、以下のページへのリンクがあります。
これは、使用した HTML および CSS コードです。
HTML & CSS
<style type="text/css">.snowContainer{width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;}.snowExample{position: absolute; top: -450px; opacity: .5; text-align: center;animation: SnowExampleSlide ease-in infinite;-webkit-animation: SnowExampleSlide ease-in infinite;-moz-animation: SnowExampleSlide ease-in infinite;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-webkit-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-moz-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}</style><div class="snowContainer"><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 3s;animation-delay: 3s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /></div>CSS
この例には 4 つの小さな画像と 2 つの大きな画像があり、それらは異なる速度で動くように設定されており、目をだましてそれらが近くにあると思わせます。
また、上部の位置とタイミングを正しくするには、ある程度の計算を行う必要があります。たとえば、ここで使用する画像は 1198x999 ピクセルで、高さ 300 ピクセルの div です。
画面上の画像サイズは幅 400px に設定されているため、位置は少なくとも (400/1198)*999=333 ピクセル上から開始し、画像の新しい高さと div の高さ 333+300 に移動する必要があります。 =633.
位置が絶対に設定されている場合にオブジェクトを中央に配置する方法の例もあります。これらは左 50% に設定され、左余白はオブジェクト幅の半分に設定されます。
