Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【ツール】雨降りCSSコード生成ツール

 

 どうも!LSSです!!

 

「雨降りCSSコード生成ツール」完成しました!

 

 

雨降りCSSコード生成ツール

 
速度:秒(雨枠1つ分、横に移動するのにかかる時間)

雨の色:
雨の太さ:px

雨の角度:deg

雨の横位置:px(雨の長さにも影響)

雨枠の幅:px

雨枠の高さpx

雨2の横ズレ:px

雨2の縦ズレ:px

雨3の横ズレ:px

雨3の縦ズレ:px

背景色グラデーション:

 

コード

 

 

使い方

雨が降っているアニメーション、調整用コントロール、コード、があります。

調整用コントロールの内容を変更する事で、リアルタイムに雨のアニメーションが変化します。(アニメーション速度、雨の角度など)

 

色々変えてみて遊べる他、調整を加えたアニメーションを表示するためのコードが表示されます。(こちらも調整用コントロールの内容を変更した時点でリアルタイムに内容生成されます)

 

気に入ったアニメーションができましたら、「コード」の内容をコピペして、ブログやWebサイトでご自由にお使いください。

 

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^