Это 28-й день моего участия в ноябрьском испытании обновлений. Узнайте подробности события:Вызов последнего обновления 2021 г.
Вторая модификация: сценарий использования флажка не обязательно является нативной проверкой! ! ! Игра в игры, переключение переключателей, подсчет очков и т. д. — все это сценарии использования.В этой статье предлагается только модифицированный метод, а не единственный. Вы можете выбрать метод, который изменяет только предыдущее поле. Изучайте технологии, не ограничивайтесь чем-то одним.
На область комментариев Nuggets действительно легко повлиять другие. Что бы ни писали другие люди, вы все это примете сами, и прочитаете критически, как и мою статью, вы можете не обязательно соглашаться со статьей, но вы можете изучить такой план! ! ! !
предисловие
Для фронтенд-разработчиков флажки должны быть обычным явлением. Используя проверенное свойство флажка, мы можем сделать много замечательных эффектов, и мы использовали флажок, чтобы приостановить анимацию раньше. Несколько дней назад я также видел, как иностранные воротилы используют чекбок для создания игр:Ву Ву Ву Брайан Браун.com/2021/09/21/…, Я действительно восхищаюсь пятью телами, но для такого новичка, как я, я могу достичь только некоторых простых вещей. Вы должны быть хорошо знакомы с кнопкой переключения ниже, и различные великолепные и причудливые эффекты также были получены из этого эффекта, например, переключение темного режима. Жизнь десять тысяч, освоил один, десять тысяч! Еще нет.
Всем рекомендую заглянуть в этот репозиторий на codepen: отсюда же записывается эффект обложки статьи! tql код спрей.IO/Olivia Got/PE…
Этикетка
Здесь используйте for для связывания метки и ввода
<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>
Также установите невидимый ввод
input {
display: none;
}
Украсить этикетку
Столкнувшись с проблемой украшения флажка, в основном мы рассматриваем замену ввода украшения на лаб.
Установите цвет фона, ширину и высоту, а также закругленные углы.
.switch {
display: inline-block;
position:relative;
width: 40px;
height: 20px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
Окончательный эффект выглядит следующим образом:
переключить круг
На метке будет кружок, который слева в начале.Эффект следующий.На самом деле этого можно добиться только с помощью псевдоэлементного + позиционного позиционирования.
Это position:absolute, при позиционировании позиции top1px, left1px. Также установите закругленные углы.
.switch:after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
top: 1px;
left: 1px;
transition: all 0.3s;
}
отмечен+мяч движется вправо
После нажатия здесь круг побежит вправо.Вариантов реализации два.
1. Еще по таргетингу
Когда флажок установлен, будут установлены верхний, левый, нижний, правый. Здесь необходимо установить top и left на auto, преимущество этого в том, что не нужно учитывать ширину метки.
input[type="checkbox"]:checked + .switch:after {
top: auto;
left: auto;
bottom: 1px ;
right: 1px ;
}
Конечно, если вы знаете ширину метки, вы можете установить верхнюю и левую сразу.
top: 1px;
left: 21px;
2.translateX
*transform: translateX(20px)*
Украсьте переключаемую метку
добавить цвет фона
input[type="checkbox"]:checked + .switch {
background-color: #7983ff;
}
Эффект:
постскриптум
Кажется, что эта статья представляет собой введение в эффект украшения флажка, но на самом деле это статья, в которой рассказывается, как украсить флажок. Последняя идея состоит в том, чтобы полагаться на эффект связывания for и украшать метку для достижения окончательный эффект.