تقدم هذه المقالة رمز التأثيرات الخاصة لمربع الاختيار لنموذج 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.2seasy; GrowCircle 0.2s easy; } } .md-checkbox label>span.inc { الخلفية: #fff اليسار: -20px؛ -20 بكسل؛ الارتفاع: 60 بكسل؛ العرض: 60 بكسل؛ العتامة: 0؛ نصف قطر الحدود: 50% !مهم; md-checkbox input[type=checkbox] { الرؤية: مخفي؛ الموضع: مطلق؛ } .md-checkbox label { المؤشر: مؤشر; -المدة: 0.2 ثانية؛ } .md-checkbox label>.check { top: -4px left: 6px width: 10 بكسل الارتفاع: 20 بكسل؛ الحدود: 2 بكسل صلب #26A69A؛ الحدود اليسرى: لا شيء؛ تدوير (180 درجة)؛ تحويل: تدوير (180 درجة)؛ -webkit-transition-delay: 0.2 ثانية؛ -moz-transition-delay: 0.2s; (45 درجة)؛ -moz-transform: مقياس (1) تدوير (45 درجة)؛ تحويل: مقياس (1) تدوير (45 درجة })؛ .md-checkbox input[type=checkbox]:checked~label>.box { العتامة: 0; -webkit-transform: مقياس (0) تدوير (-180 درجة)؛ -moz-تحويل: مقياس (0) تدوير (-180 درجة ); تحويل: مقياس (0) تدوير (-180 درجة)؛ } .md-checkbox label>.box { top: 0px border: 2px Solid #666 الارتفاع: 20 بكسل؛ العرض: 20 بكسل؛ مؤشر z: 5؛ -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; /head> <body> <div class=md-checkbox> <نوع الإدخال=معرف مربع الاختيار=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></ أتش تي أم أل>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.