スキルアップを始める

【CSS】画像をクリックしたら動き出すイベントを作る方法

CSS(シー・エス・エス)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「jQueryやJavaScriptを使う」といった方法が定石だろうとは思いますが、CSSだけでも作れそうでしたので、試してみます。

input:checkedを使う

input:checkedを使うことで、チェックボックスがON・OFFの場合、という使い方ができます。具体的には下記のような感じです。

<input class="btn01" type="checkbox">

そうすると、チェックボックスが表示されます。

非表示にしてもよかったのですが、今回は分かりやすいように表示させておきます。

:checkedを隣接の+(プラス)で連結する

input:checked+.char01{}といった感じで、画像のクラスと連結させます。

input:checkedとすることでチェックボックスにチェックが入っている時、という条件を作ることができるので、チェックを入れたときだけ隣接している画像が動き出すようになります。

HTML部分はこちらです。

<input class="btn01" type="checkbox">
<img class="char01" src="https://css.eguweb.tech/wp-content/uploads/123.gif">

CSS部分はこちらです。

.btn01{
position:absolute;
}
input:checked+.char01{
position:absolute;
animation-name:move;
animation-duration:20s;
animation-timing-function:linear;
animation-fill-mode:forwards;
}

@keyframesで動かす

あとは、今まで何度も使ってきましたが、@keyframesを使ってアニメーションをします。

@keyframes move{
0%{
left:0;
}		 
100%{
left:80%;
}
}

これで、animation-name:move;と一致するので、チェックを入れたタイミングでアニメーションが開始されます。

▼サンプルページはこちら

CSS

まとめ

まさか、こんな方法があったのか…!という感じです。

色々な方法がありますね…!日々勉強です😃

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら