css3で雪降らし(ネタ) – Merry X’mas!
メリークリスマス！
というわけでむか～し見たことがあるような、雪が降るエフェクトをCSS3でやってみました。
こんな感じに雪が降り出します。
※Chrome4、Safari4↑では表示確認済みですが、Chromeの方がお勧めです。
詳細とブックマークレットは続きから。
ブックマークレット
- snow effect[kzms2]←をお気に入り登録（ブックマーク）します。
- 雪を降らせたいページでクリックします
以上です。
ちょこっとだけ説明
雪球（？）の作り方
●っぽい物が上から降ってくると思いますが、これはborderのみで実装しています。
どういうことかというと…
border-width:5px solid #fff;
-webkit-border-radius:5px;
というように、ボーダーの太さと、角丸の径の大きさをそろえると丸い形になるのでそれを利用しています。
アニメーションの基本設定
遅延させる時間、アニメーションさせる時間、開始位置、などはJavascriptで付与していますが、アニメーション自体はCSS3のみでやっています。
アニメーションの詳細部分
アニメーションの詳細は、基本的には以下のようになっています。
kzms2snow1{
0%{}
100%{top:1500px;margin-left:0;}
}
まとめ
- Javascriptでやるよりは軽いけれども、若干重いかも…
- というよりこれそもそも誰得？
昔ふるいサイトで、こういうサイトありましたよね！
まあ思いつきでやったネタということで…！
皆様よい聖夜をっ
