最近のwebサイトはアニメーションが入っているものが多く、僕もその流行に便乗したく学び始めました。
まずは、マウスオーバーをトリガとしたAnimationをしてみました。文字の色や大きさ、背景色を変えてみました。
以下参考サイトです
テキストの文字をあらかじめ白くして、マウスオーバーしたら背景色を変えます。
Box1という[class]の中に全く同じ大きさのBox2を作成し二つのBoxが重なっている状況を作ります。Box1の上にBox2がある。 この時のマウスオーバーの設定を[.Box1:hover{~略~}]とすると、何も起こりません。 しかし、[.Box2:hover{~略~}]と書き換えるとマウスオーバー時にきちんと変化しました。 Boxが重なっているとき[:hover]の設定を下層のBoxに設定すると、マウスオーバーしても変化はない。 なので、Boxが重なっているときは。一番上層のBoxを指定してあげようと思いました。
文字の大きさを変える同様、画像の大きさを変えて変えました。widthの設定を変更するだけ。 ついでに、文字の間隔(letter-spacing)も変更してみました。かわいい。
にょぃーん。
にょぃーん。
にょぃーん。
CSSだけで、アコーディオンを作ってみました。仕組みはinputタグをトリガーにして、適用するCSSを変更しています。タグとセレクタについてのリンク。↓
Q.相撲の土俵の下に埋められている食べ物はどれ？
A.埋まっていなかったら問題にしません。小学校からやり直してきてください。
A.ちがうよ
A.天才！！ひゅーひゅー。他にも昆布や米などが神さまへの供え物として埋められているよ、ッキャッキャ。
ボタンをいっぱい作ってみたよ。