この記事では、H5 ネイティブ フォームのチェックボックス特殊効果コードを紹介し、全員に共有します。詳細は次のとおりです。
効果は次のとおりです。
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { 位置: 相対; フォントサイズ: 14px; } .md-checkbox label>span.inc { -webkit-animation:growCircle 0.2s の簡単さ;グローサークル 0.2 秒の容易さ; } @keyframes グローサークル {0%, 100% { 変換: スケール (0); } 70% { 背景: #eee 変換: スケール (1.25); .md-checkbox label>span.inc {背景: #fff 左: -20px; -20px; 高さ: 60px; 幅: 60px; 境界半径: 50% !重要; -webkit-border-radius: 50% md-checkbox input[type=checkbox] { 可視性: 非表示; 位置: 絶対 } .md-checkbox ラベル { カーソル:ポインタ; パディング左: 30px; } .md-checkbox ラベル> スパン { 表示: ブロック; 左: 0.2 秒; -moz-transition-duration: 0.2 秒-duration: 0.2s; } .md-checkbox ラベル>.check { 上: -4px; 左: 6px; 10px; 高さ: 20px; 境界線: なし; 境界線: 0; -moz-transform:回転(180度); 変換: 回転(180度); -webkit-transition-delay: 0.2秒; -moz-transition-delay: 0.2s; 遷移遅延: 0.2s; } .md-checkbox input[type=checkbox]:checked~label>.check { 不透明度: 1; -webkit-transform: 回転(45度); -moz-transform: スケール(1) 回転(45度); 変換: スケール(1) 回転(45度); .md-checkbox input[type=checkbox]:checked~label>.box { 不透明度: 0; -webkit-transform: スケール(0) 回転(-180 度); -moz-transform: スケール(0) 回転(-180 度) ); 変換: スケール(0) 回転(-180度); } .md-checkbox ラベル>.box { トップ: 0px; #666; 高さ: 20 ピクセル; 幅: 20 ピクセル; -webkit の遷移遅延: 0.2 秒; </style> /head> <body> <div class=md-checkbox> <input type=checkbox id=test class=md-check /> <label for=test> <span></span> <span class=check></span> <span class=box></span> オプション 1 </label> </div> <script> var list = document.getElementsByTagName('input' ); for(var i =0;i<list.length;i++){ (function(n){ list[n].addEventListener('click',function(e){ var inc = this.nextElementSibling.firstElementChild; inc.className = ''; setTimeout(function(){ inc.className = 'inc'; }) })(i) } </script> </body></ html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。