Artikel ini memperkenalkan kode efek khusus kotak centang dari bentuk asli H5 dan dibagikan kepada semua orang. Detailnya adalah sebagai berikut:
Efeknya adalah sebagai berikut:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox { margin: 50px; posisi: tinggi: otomatis; 14px; } .md-kotak centang label>span.inc { -webkit-animation: kemudahan GrowCircle 0,2 detik; GrowCircle 0.2s kemudahan; animasi GrowCircle 0.2s } @keyframes GrowCircle { 0%, 100% { transform: skala(0.8); } } .md-kotak centang label>span.inc { latar belakang: #fff; kiri: -20px; -20 piksel; tinggi: 60 piksel; lebar: 60 piksel; opasitas: 0; radius batas: 50% !penting; -moz-radius batas: 50% !penting; md-kotak centang masukan[tipe=kotak centang] { visibilitas: tersembunyi; posisi: absolut; } .md-kotak centang label { kursor: penunjuk; padding-kiri: 30px; } .md-kotak centang label>span { tampilan: blok; posisi: kiri: 0; -webkit-durasi-transisi: 0,2 detik; -durasi: 0,2 detik; } .md-label kotak centang>.centang { atas: -4 piksel kiri: 6 piksel; 10px; tinggi: 20px; batas: 2px solid #26A69A; batas atas: tidak ada; batas kiri: tidak ada; indeks-z: 5; memutar(180deg); transformasi: memutar(180deg); -webkit-transisi-penundaan: 0,2 detik; -moz-transition-delay: 0,2s; transisi-delay: 0,2s; } .md-checkbox input[type=checkbox]:checked~label>.check { opacity: 1; (45 derajat); -moz-transformasi: skala(1) putar(45 derajat); .md-kotak centang masukan[tipe=kotak centang]:dicentang~label>.kotak { opasitas: 0; -webkit-transform: skala(0) putar(-180deg); ); transformasi: skala(0) putar(-180deg); } .md-label kotak centang>.kotak { atas: 0 piksel batas: 2 piksel padat #666; tinggi: 20 piksel; lebar: 20 piksel; indeks-z: 5; -penundaan transisi webkit: 0,2 detik; /head> <body> <div class=md-checkbox> <tipe input=checkbox id=test class=md-check /> <label untuk=test> <span></span> <span class=check></span> <span class=box></span> Opsi 1 </label> </div> <script> var list = document.getElementsByTagName('input' ); for(var i =0;i<daftar.panjang;i++){ (fungsi(n){ daftar[n].addEventListener('klik',fungsi(e){ var inc = this.nextElementSibling.firstElementChild; inc.className = ''; setTimeout(function(){ inc.className = 'inc'; },0 })(i) } </script> </body></ html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.