В этой статье представлен код специальных эффектов флажка в собственной форме H5. Подробности доступны всем:
Эффект следующий:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <title></title> <style> .md-checkbox {margin: 50px; height: auto; 14 пикселей; } .md-checkbox label>span.inc { -webkit-animation:rowCircle 0.2s легкость; -moz-animation: ростЦиркл 0,2 с легкость; анимация: ростЦиркл 0,2 с легкость; } @keyframes ростЦиркл { 0%, 100% { Transform: масштаб (0); } 70% { фон: #eee; масштаб (1,25); } } .md-checkbox label>span.inc {background: #fff left: -20px top: -20px; высота: 60px; непрозрачность: 0; border-radius: 50% !important; -moz-border-radius: 50% !important; -webkit-border-radius: 50% !important; md-checkbox input[type=checkbox] { видимость: скрытая позиция: абсолютная } .md-checkbox label {курсор: указатель; отступ влево: 30 пикселей; } .md-checkbox label>span { display: block; left: 0; -webkit-transition-duration: 0,2 с; -длительность: 0,2 с; } .md-checkbox label>.check { сверху: -4px; слева: 6px; 10 пикселей; высота: 20 пикселей; граница: 2 пикселя #26A69A; граница слева: нет; z-индекс: 5; -webkit-transform: Rotate (180deg); поворот (180 градусов); преобразование: поворот (180 градусов); -webkit-переход-задержка: 0,2 с; -moz-transition-delay: 0,2 с; задержка перехода: 0,2 с; } .md-checkbox input[type=checkbox]:checked~label>.check { opacity: 1; -webkit-transform: Scale(1) Rotate (45 градусов); -moz-transform: масштаб (1) поворот (45 градусов); преобразование: масштаб (1) поворот (45 градусов); .md-checkbox input[type=checkbox]:checked~label>.box { opacity: 0; -webkit-transform: Scale(0) Rotate(-180Deg); ); Transform: Scale(0) Rotate(-180Deg } .md-checkbox label>.box { top: 0px; #666; высота: 20 пикселей; z-индекс: 5; -webkit-transition-delay: 0,2 с; задержка перехода: 0,2 с; /head> <body> <div class=md-checkbox> <input type=checkbox id=test class=md-check /> <метка 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.