完成形を確認
クリックボタンを押したらボタンがへこむアニメーションをつくりましょう
上のアニメーションのようなものを完成させましょう！
とても簡単にできます
・・・が、そのまえに active の説明
:active
要素がクリックされているあいだだけ CSS が適用される
セレクタ:active {
プロパティ: 値;
}
書き方は hover と似ていますね
<p>You！押しちゃいな</p>p:active{background-color:red;}
こんな感じでクリックすると背景が赤くなります
これを踏まえてアニメーションを作成していきましょう！
アニメーション作成
このアニメーションを作ろうとしたときどのようにプログラムは動いているのだろうか
ポイント
クリックするとアニメーションが動いている
クリックすると影がなくなっている
クリックすると赤いボタン部分が下に移動している
この３点を目安に作成していこう
まずはHTML
<p>You！押しちゃいな</p>これはもう簡単
これでできあがり
ではお次はCSS
p{background-color:red;box-shadow:0px10px#bfbfbf;width:150px;text-align:center;}ボタンの色を赤にして
ボタンの下に10pxのグレーの影をつくって
幅は150pxくらいでいいかな・・・
見栄え良く文字は中央揃え
はい！とりあえずボタンは完成
ここからアニメーションをつけていこう
クリックするとアニメーションが動いているので・・・
p:active{}まずは1点目のポイントの
クリックするとアニメーションが動いている
ということなので active を設定。
active を設定しただけなので中身はカラ。
ここになにを入れていくかというと
2点目のポイントの
クリックすると影がなくなっている
という部分。
さっそく入力してみよう
p:active{box-shadow:none;}
影なくなりました！
影をなくしたいときは box-shadow: none; にすれば影は消えてくれます
さて、影は消えてくれたけどまだボタンらしくない。。
これではただ影が消えただけ。
どうするのかといえば、3点目の
クリックすると赤いボタン部分が下に移動している
を設定すればアニメーションは完成です
p:active にさらにCSSを追加します
p:active{box-shadow:none;position:relative;top:10px;}position: relative; は 【CSS】position: absolute; と position: relative;でまとめたときに基準位置を決めることで使用しました。
でも要素の位置を変更するという使い方もできます
今回は 10px の影がなくなった分だけ下にずらしたいため
position: relative;
top: 10px;
とします。
ではアニメーションを見てみましょう
ボタンを押すことができました
おまけ
さっきのコードを踏まえたうえで、よりボタンぽいものを作成しました。
コードは下記となります。
<p>click!</p>p{background-color:#1e90ff;box-shadow:0px3px#000080;width:100px;text-align:center;cursor:pointer;color:white;font-size:20px;line-height:30px;border-radius:50px;}p:active{box-shadow:none;position:relative;top:3px;}