Всем привет.
В этой лекции мы поговорим о переходах.
Вы видели в разных примерах, что мы можем изменить состояние элементов.
Ссылки могут перейти от обычной ссылки к посещенным.
Вы можете наводить курсор на вещи.
Ты можешь сфокусировать их.
Ну, а что, если вы хотите иметь немного почти анимации,
когда вы делаете эти вещи? Для
этого мы можем использовать переходы.
Поэтому, если вы наведите курсор на ссылку, вы можете изменить цвет.
Если изображение попадает в фокус,
то есть вы вложили в него вкладки, вы можете изменить размер.
И это только эти маленькие вещи, которые иногда,
когда вы делаете свою страницу, дают вам тот маленький крутой фактор, который вы
искали, чтобы показать, что вы действительно начинаете понимать эти понятия.
Так что давайте начнем.
Если вы хотите добавить переходы на страницу,
есть четыре свойства, которые вы хотите посмотреть.
Первое - это фактическое свойство перехода.
Что ты хочешь изменить?
Вы хотите изменить размер, цвет, положение, все они?
Как насчет продолжительности перехода?
Как долго должен длиться каждый переход?
Они могут произойти очень быстро, когда люди почти даже не замечают этого, или
это может быть очень долго и вытянуто.
Время перехода, это немного странно, но это идея,
если вы собираетесь сделать что-то большее, хотите ли вы сделать его медленно больше и
линейно все в то же время, или вы хотите, чтобы это облегчить или облегчить?
Вы можете изменить, как, какая скорость она делает разные вещи.
Задержка перехода, вы хотите, чтобы я подождал,
должен ли браузер ждать, прежде чем он начнет переход?
Если кто-то зависает, вы хотите, чтобы они зависали две секунды, прежде чем вы продолжите?
Возможно, вы захотите подумать об этом, потому что иногда, когда
люди смотрят на вашу страницу, у них есть, просто мышь разворачивается повсюду.
И вы не хотите, чтобы они смотрели на переходы, если они действительно не
должны сосредоточиться на этом одном элементе.
Ладно.
Так что давайте продолжим и начнем.
Если вы хотите использовать переходы, первое, что вам нужно сделать,
это то, что вы делали все это время, определите свой элемент и
скажите, какой стиль вы хотите иметь при первой загрузке страницы.
Далее вы хотите выбрать элементы, которые вы хотите перенести.
Таким образом, вы, возможно, стилизовали его с фоновым цветом, цветом, шириной и высотой.
Вы не обязательно хотите менять все эти вещи,
когда вы идете в свой переход.
Так что выбирайте те, которые вы хотите изменить.
В-третьих, определить новые значения для этих элементов.
И это важно.
Вам нужно объединить этот шаг с псевдоклассом.
Он должен быть вместе с зависанием или фокусом или активным.
Итак, давайте посмотрим на какой-то код только на экране, а
затем я проведу вас через реальный пример.
Итак, я пошел, я пошел вперед и определил div, чтобы просто иметь цвет,
фон, высоту линии, высоту ширины, все типичные вещи.
Если вы заметили, радиус границы довольно мал.
Всего шесть пикселей.
Затем я вошел и сказал, знаете что, я собираюсь пойти вперед и
определить каждое из этих свойств.
Поэтому мои свойства, которые я хочу изменить, будут иметь цвет, ширину, фон
и радиус границы.
Это довольно много, но я хотел большой пример.
Вы можете сказать, я хочу, чтобы это заняло полсекунды,
я хочу, чтобы все было почти таким же изменением, и
я хочу, чтобы вы подождали полсекунды, прежде чем начать переход.
Последний шаг, который был связан с псевдоклассом,
заключался в добавлении div: hover и предоставлении новых значений, которые я хочу, чтобы все было.
Поэтому вместо того, чтобы быть черным, я хочу переключить его на белый.
Вместо того, чтобы ширина составляла 250 пикселей, я хочу, чтобы она была 350,
другой цвет фона и гораздо больший радиус границы.
Ладно? Итак, давайте
посмотрим на пример, который у меня есть.
Я уже запрограммировал, чтобы показать тебе.
Поэтому в этом примере я использовал внутреннюю таблицу стилей,
отчасти потому, что вся основная часть моего HTML находится прямо здесь.
Все, что у меня есть, это один div.
Как я стилизовал это сказать, что на данный момент, когда кто-то наводит на этот div,
я хочу, чтобы вы изменили цвет с фоном и радиусом границы.
И я также включил активный,
просто потому, что я хотел показать вам, что вы можете делать несколько разных состояний.
Активный, если вы, возможно, не помните, когда вы нажимаете на состояние.
Так что давайте взглянем.
Вот мой переход, по умолчанию, когда вы смотрите на страницу.
Теперь, когда я наведите курсор на него,
вы увидите, что это своего рода крутое изменение цвета и радиуса границы.
Радиус границы на самом деле может изменить вещи от выглядеть как квадрат
до выглядеть как круг.
Последний из них теперь я буду держать мышь вниз, и
мы посмотрим, что произойдет, когда состояние переходит в актив.
Видишь, еще раз, я изменил все эти вещи.
Я думаю, что это довольно круто.
Однако это также может быть очень отвлекающим.
Таким образом, вы хотите использовать переходы экономно
, чтобы убедиться, что вы не забираете вещи со своей страницы.
Это возможно и
очень часто использовать сокращенность, когда вы пишете свои различные переходы.
Вместо того, чтобы писать продолжительность перехода
, свойства, разные вещи вроде этого, вы можете поместить все это в одну строку.
Это говорит, что я хочу изменить фон, это должно занять 0,2 секунды, и
я хочу облегчить, или я хочу, чтобы это был линейный переход.
Здесь говорится, что я хочу идти вперед и изменить радиус границы, сколько времени это
должно занять, тип перехода и сколько времени вы хотите задержать.
Поэтому, когда вы смотрите на код других людей,
не смущайтесь, если он не похож на мой первый пример.
Они, вероятно, использовали ярлыки.
Ладно.
Так что, надеюсь, это было немного круто, и вы рады пойти и
реализовать какие-то переходы на вашей странице.
Игра с ними также сделает больше, чем сделает ваш сайт выглядеть
красочным и активным.
Это даст вам практику по пониманию этих различных
псевдоклассов и состояний, таких как активные, фокус, зависание и т. Д.
Но помните, что доступность всегда будет проблемой,
когда вы имеете дело с разными состояниями на странице.
Не требуйте, чтобы люди будут зависать на вашей странице.
Не требуйте, чтобы люди собирались заглядывать.
Вы хотите убедиться, что весь ваш контент всегда доступен, и
просто сохранить эти переходы для чего-то немного дополнительного, чтобы добавить на ваш сайт.
Удачи.