CSSパタパタミニ絵本制作メモ
CSSの説明
入れられれば…
Cascading Style Sheets
property: value
block {}
semicolon
selectors
statements
確認OSブラウザ
ページ数
表紙合わせて合計36ページ
表紙抜きだと34ページ
見開き17こ
動きの参考
以下のなかから映えそうなのを選ぶ
上下左右に動く translate
ギューンと走る
大きくなったり小さくなったり
rotate 左右
rotate 奥行き perspective
平行四辺形になったり
増えたり減ったり
ローディングみたいにパタパタ
立体的になる
点滅 box-shadow
色が変わる
色が変わるグラデでしましま
グラデーションが動く
放物線を描きながら落ちる
重なって色が変わる
薄かったのが満たされる
丸くなったり四角くなったり
カーソル当ててみたり
がたがた震える
追いかけっこ
追いかけっこ奥行き感
サイコロになる
鍋になる
花になる
本になる
回転しながら山を登る
分割して細切れになる
心臓みたいに脈打つ
レゴになる・つみあがる
本の流れ
1.
生まれる
基本の形
2.
成長する
scale
3.
お散歩。楽しい感じ
translate
rotate
4.
走る
5.
放物線を描いて落っこちる
6.
落っこちて潰れたのがもとの大きさに戻る
7.
数が増えた!
8.
数が増えたのがパタパタして消える
9.
おしゃれする
(体の色・模様が変わる)
カラー印刷だと表現しやすい
(形が変わる)
丸くなる border-radius
傾ける skew
点滅しながら
10.
具合が悪い。がたがた震える
translateこまかく
色を青ざめる
表情変える
手当てするボタンで元気になる
11.
山をゴロゴロ登る
12.
空を飛ぶ
13.
ふわっと落ちる
14.
小さくなってさよなら
scale
opacity
15.