ホームページ > 記事 > ウェブフロントエンド > CSS3でラジオボタンのアニメーション効果を実装する方法
CSS3でラジオボタンのアニメーション効果を実装する方法
- php中世界最好的语言オリジナル
- 2017-11-25 14:05:402029ブラウズ
CSS3 でラジオボタンのアニメーション効果を実装するにはどうすればよいですか?なぜラジオボタンのアニメーション効果を実装する必要があるのでしょうか? CSS3 を使用してラジオ ボタンのアニメーション効果を実装する方法をマスターするのに役立つ 2 つの例を示します
<div> <input type="radio" name="radio-1" id="radio-1-1" checked="checked"> <label for="radio-1-1"></label> <input type="radio" name="radio-1" id="radio-1-2"> <label for="radio-1-2"></label> <input type="radio" name="radio-1" id="radio-1-3"> <label for="radio-1-3"></label> </div>
ここでは、input タグの type 値を radio として指定し、すべてのラジオの name 値は同じです。単一選択効果が得られるようにします。ここのラベルの for 属性については、最初はなぜこのように設定されているのか理解できませんでしたが、後でこの属性の定義を調べました。とにかく、この属性が設定されている限り、一般的な意味は次のとおりです。ラベル要素をクリックして参照します。受信機は自動的にラジオにフォーカスを移します。次に、CSSを使用してHTMLに効果を設定します。
.radio-1 { width: 900px; padding: 3% 0%; margin: 10px auto; background-color: darkseagreen; text-align: center;
}
.radio-1 label { display: inline-block; position: relative; width: 28px; height: 28px; border: 1px solid #cccccc; border-radius: 100%; cursor: pointer; background-color: #ffffff; margin-right: 10px;
}ここでは、以前の記事でほとんどの属性を紹介しましたが、この属性はマウスのスタイルを設定するために使用され、ポインターに設定されます。その後、マウスをラベル要素上に置くと、マウスのスタイルが手に変わります (これは私のコンピューターの場合です)。さて、引き続き
.radio-1 label:after {
content: ""; position: absolute; width: 20px; height: 20px; top: 4px; left: 4px; background-color: #666; border-radius: 50%; transform: scale(0); transition: transform .2s ease-out;
}を見てみましょう
ここでは、なぜこの属性を設定するのでしょうか?上の図に示すように、小さな黒い点を設定するだけです。まず、content 属性を空に設定します。これは、背景色を黒に設定したいだけなので、コンテンツを入力する必要がないことを意味します。それだけです。また、最初は、transform のスケール値を 0 に設定します。これにより、小さな黒い点が非表示になります。
.radio-1 [type="radio"]:checked + label { background-color: #eeeeee; transition: background-color .2s ease-in;
}
.radio-1 [type="radio"]:checked + label:after {
transform: scale(1); transition: transform .2s ease-in;
}
ここで + 記号が使用されていることに注意してください。これは何を意味しますか?その学名は隣接兄弟セレクターと呼ばれ、別の要素の直後の要素を選択し、両方が同じ親要素を持っていることを意味します。これは、ラジオの後に表示されるラベルを選択することを意味します。ラベルを直接設定するだけですか？非常に大規模なシステムでは、混乱を避けるためにラベル要素を何度も使用する可能性があることを想像してください。ここでは、トランジション効果を設定するために使用されるトランジション属性を示します。最後に、ラジオを非表示にして完了です。
.radio-1 [type="radio"]{ display: none;
}
Action twoこれは 2 番目の特殊効果です
demo2.gif
実際、このアニメーションを見たときの第一印象は、変換属性が回転するように設定されている点を除けば、前のアニメーションとまったく同じであるということです。これ以上説明する必要はありません。前の例を組み合わせるだけで、このような効果を簡単に作成できます。コードに直接進みましょう:
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Radio</title>
<style>
.radio-2 { width: 900px;padding: 3% 0; margin: 50px auto; background-color: darkseagreen; text-align: center;
}
.radio-2 label { display: inline-block; width: 28px; height: 28px; overflow: hidden; border: 1px solid #eeeeee; border-radius: 100%; margin-right: 10px; background-color: #ffffff; position: relative;cursor: pointer;
}
.radio-2 label:after { content: ""; position: absolute;top: 4px; left: 4px; width: 20px; height: 20px; background-color: #666666; border-radius: 50%; transform: rotate(-180deg);transform-origin: -2px 50%; transition: transform .2s ease-in;
} .radio-2 [type="radio"] { display: none;
}
.radio-2 [type="radio"]:checked + label:after{
transform: rotate(0deg); transition: transform .2s ease-out;
} </style></head><body><div>
<input type="radio" name="radio-2" id="radio-2-1" checked="checked">
<label for="radio-2-1"></label>
<input type="radio" name="radio-2" id="radio-2-2">
<label for="radio-2-2"></label>
<input type="radio" name="radio-2" id="radio-2-3">
<label for="radio-2-3"></label></div></body><ml>これを読んだ後は、誰もがラジオ ボタンのアニメーション効果を実装する方法をすでに理解していると思います。これら 2 つの例 詳細 php 中国語 Web サイトの他の関連記事にも注目してください。
関連記事:
以上がCSS3でラジオボタンのアニメーション効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。