3 つのクールな CSS3 チェックボックス アニメーション効果_html/css_WEB-ITnose

これは非常にクールな CSS3 チェックボックス アニメーション効果です。このチェックボックス アニメーション特殊効果のセットには合計 3 つの効果があり、それらはすべてネイティブのチェックボックス要素に基づいて美化されており、ユーザーがチェックボックスをクリックしたときに非常にクールなアニメーション効果を生成します。

オンラインプレビュー ソースコードのダウンロード

使用法

HTML構造

通常のHTMLチェックボックスコントロールのスタイルは非常に単純です。最新の Web デザインでは、CSS3 を使用して、より美しい外観とアニメーション効果を設定できます。 CSS の @keyframe 属性を使用して、さまざまな魔法のチェック ボックス アニメーション効果を作成できます。

これらのチェック ボックス アニメーションのデモでは、順序なしリスト構造が使用されています。各リスト項目には 132fb881aa2cfa2235870f1b0b25902f 要素と 2e1cf0710519d5598b1f0f14c36ba674 があります。

<ul>  <li>      <input type="checkbox" name="manager" id="manager" />      <label for="manager">项目经理</label>  </li>  <li>      <input type="checkbox" name="webdesigner" id="webdesigner" />      <label for="webdesigner">网页设计师</label>  </li>  <li>      <input type="checkbox" name="webdev" id="webdev" />      <label for="webdev">网站技术员</label>  </li>  <li>      <input type="checkbox" name="seo" id="seo" />      <label for="seo">SEO</label>  </li>  <li>      <input type="checkbox" name="itstaff" id="itstaff" />      <label for="itstaff">IT技术员</label>  </li>  <li>      <input type="checkbox" name="csr" id="csr" />      <label for="csr">客户服务代表</label>  </li></ul>             

CSS スタイル

CSS スタイルでは、まずネイティブのチェックボックスを非表示にします。

input[type="checkbox"] {    display: none;}        

次に、ラベル要素に相対位置といくつかのパディング値を設定します。次に、label 要素の :before および :after 疑似要素を使用する必要があります。ここでは Font Awesome フォント アイコンが使用されているため、そのフォントは FontAwesome に設定されます。 ❤️