이 글은 H5 네이티브 형태의 체크박스 특수 효과 코드를 소개하고 있으며, 자세한 내용은 다음과 같습니다.
효과는 다음과 같습니다.
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { 여백: 50px; 위치: 높이: 자동; 14px; } .md-checkbox label>span.inc { -webkit-animation: GrowthCircle 0.2s 용이성; 성장Circle 0.2s 용이성; } @keyframes 성장Circle { 0%, 100% { 변환: 불투명도: 0.8 } 70% { 배경: #eee; } } .md-checkbox label>span.inc { 배경: #fff 왼쪽: -20px; -20px; 너비: 60px; 테두리 반경: 50% !important; -webkit-border-radius: 50% !important; md-checkbox 입력[type=checkbox] { 가시성: 숨김; 위치: 절대 } .md-checkbox label { 커서: 포인터; 왼쪽: 30px; .md-checkbox label>span { 디스플레이: 블록; 왼쪽: 0.2s; -기간: 0.2s; } .md-checkbox label>.check { 상단: -4px; 너비: 10px, 높이: 20px, 테두리: 2px, 테두리 왼쪽: 없음, -webkit-transform: -moz-transform: 회전(180deg); 변환: 회전(180deg) -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; 전환 지연: 0.2s; } .md-checkbox input[type=checkbox]:checked~label>.check { opacity: 1; -webkit-transform: scale(1) (45deg); -moz-transform: scale(1) 회전(45deg); 변환: scale(1) 회전(45deg); .md-checkbox input[type=checkbox]:checked~label>.box { 불투명도: 0; -webkit-transform: scale(0) 회전(-180deg) -moz-transform: scale(0) 회전(-180deg) ); 변환: scale(0) 회전(-180deg) } .md-checkbox label>.box { 상단: 0px 테두리: 2px #666; 높이: 20px; z-색인: 0.2s; -moz-transition-delay: 0.2s; /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'; },0) }) })(i) } </script> </body></ HTML>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.