Переходы CSS3
Используйте новую панель Переходы CSS (Transitions CSS), чтобы
применить свойство
плавного изменения на CSS-основе - парение, нажим и
сосредоточение. (Общий пример - элемент строки
меню, который постепенно меняется от одного цвета до другого при
наведении курсора).
Вы можете теперь создать переходы CSS, используя и поддержку уровня
кода, и новую панель Transitions CSS (Window > CSS Transitions). -
Окно> Переходы CSS).
Переходы CSS позволяют изменять свойства с плавным
переходом из одного состояния в другое по указанной продолжительности.
Этот переход может быть вызван щелчком
мыши, наведением курсора или любыми изменениями, которые применены к
элементу (включая даже изменение на признаке класса элемента).
Простой пример
Вот простой пример, где мы добавим переход к перестановке цвета фона
ссылки. Когда колеблется, цвет фона ссылки изменится, и мы будем
использовать переход, чтобы разгладить то изменение - эффект ранее
только возможный при использовании Flash или JavaScript, но
теперь
возможный с несколькими простыми линиями CSS.
Простая гиперссылка, как эта:
<a href="#" class="foo">Transition me!</a>
Затем, мы добавим декларацию для нормального государства ссылки с
небольшим дополнением и светло-зеленым фоном, сопровождаемым фоновой
перестановкой к более темному зеленому цвету на парении:
a.foo {
: 5px 10px;
background: #9c3;
}
a.foo:hover {
background: #690;
}
Теперь давайте добавлять переход к тому изменению цвета фона. Это
разгладит и анимирует различие об указанном промежутке времени.
В настоящее время, мы будем использовать только предустановленные
продавцом свойства, которые в настоящее время работают в
WebKit-на-основе браузерах (Сафари и Хром), чтобы сохранить вещи
простыми. Позже, мы добавим приставки продавца для Mozilla и Оперы.
a.foo {
padding: 5px 10px;
background: #9c3;
-webkit-transition-property: фон;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: непринужденность;
}
foo:hover {
background: #690;
}
и т.д.
Подробнее о
переходах CSS
Многократный выбор класса
CSS
Вы можете теперь применить многократные классы CSS к
единственному
элементу.
Выберите элемент, откройте диалоговое окно Multiclass
Selection, и выберите multiple classes- Ваш классы.
После того, как Вы применяете многократные классы, Dreamweaver
создает новый мультикласс из Ваших выборов. Новый мультикласс тогда
становится доступным от других мест, где Вы делаете выборы CSS.
Вы можете открыть диалоговое окно Multiclass Selection от нескольких
пунктов доступа:
HTML property inspector -Подручное меню HTML (Выбирают,
Применяет Multiple Classes -Многократные Классы от меню).
Вернуться к: Новое в последних версиях Adobe
Dreamweaver