CSS3でラジオボタンのアニメーション効果を実装する方法-htmlチュートリアル-php.cn

CSS3でラジオボタンのアニメーション効果を実装する方法

php中世界最好的语言

リリース： 2017-11-25 14:05:40

オリジナル

1961 人が閲覧しました

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 を使用してアイコン効果を作成する方法

CSS エンコーディングを変換する方法

キャンバスを使用してボールとマウスの相互作用を実現する方法

以上がCSS3でラジオボタンのアニメーション効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。