お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

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

    CSS(シーエスエス)
    この記事は約2分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    画像をクリックしたら動き出す…といったアニメーションを作りたいと思った時は「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.net/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;と一致するので、チェックを入れたタイミングでアニメーションが開始されます。

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

    ページタイトル

    まとめ

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

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

    Loading
    タイトルとURLをコピーしました