บทความนี้จะแนะนำโค้ดเอฟเฟกต์พิเศษของช่องทำเครื่องหมายของรูปแบบเนทิฟ H5 และแชร์กับทุกคนโดยมีรายละเอียดดังนี้:
ผลกระทบมีดังนี้:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { ระยะขอบ: 50px; 14px; } .md-checkbox label>span.inc { -webkit-animation: growCircle 0.2s ง่าย; growCircle 0.2 วินาที ความง่ายดาย: growCircle 0.2 วินาที; } @keyframes growCircle { 0%, 100% { แปลงร่าง: สเกล (0); ความทึบแสง: 0.8; } 70% { พื้นหลัง: #eee; } } .md-checkbox label>span.inc { พื้นหลัง: #fff; ซ้าย: -20px; -20px; ความสูง: 60px; ความทึบแสง: 0; border-radius: 50% !important; md-checkbox input[type=checkbox] { การมองเห็น: ซ่อนเร้น; ตำแหน่ง: สัมบูรณ์; } .md-checkbox label { เคอร์เซอร์: ตัวชี้; ช่องว่างภายใน: 30px; } .md-transition-duration: 0.2s; -duration: 0.2s; } .md-checkbox label>.ตรวจสอบ { ด้านบน: -4px; 10px; ความสูง: 20px; เส้นขอบ: 2px ทึบ: หมุน (180deg); หมุน (180deg); การแปลง: หมุน (180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .md-checkbox input[type=checkbox]:checked~label>.check { ความทึบ: 1; -webkit-transform: scale(1) หมุน (45deg); -moz-transform: สเกล (1) หมุน (45deg); .md-checkbox input[type=checkbox]:checked~label>.box { ความทึบ: 0; -webkit-transform: scale(0) หมุน(-180deg); -moz-transform: scale(0) หมุน(-180deg การแปลง: ขนาด (0) หมุน (-180deg); } .md-checkbox label>.box { top: 0px; #666; ความสูง: 20px; ความกว้าง: 20px; z-index: 5; -webkit-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('คลิก',ฟังก์ชัน(e){ var inc = this.nextElementSibling.firstElementChild; inc.className = ''; setTimeout(ฟังก์ชั่น(){ inc.className = 'inc'; },0); })(i) } </script> </body></ html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network