Анимированый Checkbox
В данном методе, как и практически в любом, стандартный чекбокс скрывается, а обращение к нужным элементам происходит через input:checked + selector. «+» обозначает соседа «справа» т.е. следующий элемент по соседству.
Добавляем html разметку в нужном месте
<label class="checkbox"> <input type="checkbox" class="invisible-checkbox"> <span class="checkbox-label-container"> <span class="checkbox-svg"> <span class="hover"></span> <i class="icon"> <svg width="12px" height="9px" version="1.1" focusable="false" viewBox="0 0 24 24" xml:space="preserve"> <path fill="none" stroke="#fff" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path> </svg> </i> </span> <span class="checkbox-label"> <span class="term-name">Checkbox</span> </span> </span> </label>
Добавляем css стили в свой css файл
@-webkit-keyframes circle { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0; } 30% { opacity: 0.1; } 60% { opacity: 0.2; } 80% { opacity: 0.1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.1; } } @keyframes circle { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0; } 30% { opacity: 0.1; } 60% { opacity: 0.2; } 80% { opacity: 0.1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.1; } } .checkbox { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; min-height: 38px; } .checkbox[disabled] + .checkbox-label-container { opacity: 0.5; } .checkbox[disabled] + .checkbox-label-container .hover:after, .checkbox[disabled] + .checkbox-label-container .hover:before { content: none; } .checkbox[disabled] + .checkbox-label-container .checkbox-svg { border-color: #ff4081; } .checkbox input:checked + .checkbox-label-container .checkbox-svg:before { background: #ff4081; } .checkbox input:checked + .checkbox-label-container .checkbox-svg:hover:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .checkbox input:checked + .checkbox-label-container .checkbox-svg:after { -webkit-animation: circle ease-in-out 0.4s; animation: circle ease-in-out 0.4s; } .checkbox input:checked + .checkbox-label-container .checkbox-svg svg { fill: #ff4081; stroke-dashoffset: 0; } .checkbox input:checked + .checkbox-label-container .checkbox-svg svg polyline { stroke-dashoffset: 0; } .checkbox:hover .checkbox-label-container .hover:after { opacity: 0.07; } .checkbox.is-clicked .checkbox-label-container .hover:before { -webkit-transform: scale(1) translate(-50%, -50%); -ms-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); } .checkbox .checkbox-label-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; position: relative; padding-top: 4px; padding-bottom: 4px; align-items: center; } .checkbox .checkbox-label-container .hover:after, .checkbox .checkbox-label-container .hover:before { content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; background: #ff4081; } .checkbox .checkbox-label-container .hover:after { opacity: 0; } .checkbox .checkbox-label-container .hover:before { opacity: 0.07; -webkit-transform: scale(0) translateY(-50%); -ms-transform: scale(0) translateY(-50%); transform: scale(0) translateY(-50%); } .checkbox .checkbox-label { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: center; } .checkbox .checkbox-svg { -ms-flex-negative: 0; flex-shrink: 0; position: relative; margin-right: 15px; width: 18px; height: 18px; border: 2px solid #ff4081; border-radius: 2px; display: block; margin-top: 4px; } .checkbox .checkbox-svg:before { content: ""; position: absolute; top: -2px; bottom: -2px; right: -2px; left: -2px; border-radius: 2px; -webkit-transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 40ms cubic-bezier(0, 0, 0.2, 0.1); -o-transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 40ms cubic-bezier(0, 0, 0.2, 0.1); transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 40ms cubic-bezier(0, 0, 0.2, 0.1); } .checkbox .checkbox-svg:after { content: ""; position: absolute; width: 38px; height: 38px; top: 50%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); margin-top: -20px; left: -12px; border-radius: 50%; opacity: 0; background: #ff4081; z-index: 1; } .checkbox .checkbox-svg svg { position: absolute; top: -2px; left: -2px; width: 18px; height: 18px; z-index: 8; stroke-dasharray: 23px; stroke-dashoffset: 23px; stroke: #000; stroke-width: 2px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .checkbox .invisible-checkbox { position: absolute; z-index: -1; width: 0; height: 0; opacity: 0; }
В подсвеченых строках указал где можно изменить цвет.
0 комментариев