CSS3 переходы в Dreamweaver CS6

• June 28, 2024

С добавлением HTML5 и CSS3 интерактивные веб-сайты становятся ожидаемыми. Теперь с Dreamweaver^р CS6 и новая панель CSS Transitions, вы можете создавать свои собственные интерактивные эффекты без необходимости писать какой-либо код. Вывод этого процесса только CSS3, без JavaScript. Поэтому вам не нужно беспокоиться, если зритель включил JavaScript. Переходы, созданные Dreamweaver, можно воспроизводить в любом современном веб-браузере.

Давайте посмотрим, как легко создавать наши собственные интерактивные переходы. Переход может быть применен к любому классу, идентификатору или элементу CSS. Все, что нам нужно сделать, это установить значения на панели CSS Transitions.

1. Наш первый шаг - выбрать элемент, к которому мы хотим применить переход. В нашем примере это будет ссылка меню.
   
   
2. Нажмите Window - CSS Transitions, чтобы открыть панель.
   
   
3. На панели «Переходы CSS» нажмите знак «Плюс», чтобы добавить переход.
   
   
4. В диалоговом окне «Новый переход» мы можем использовать меню «Целевое правило», чтобы выбрать из набора настроек, или ввести собственное имя для перехода. Давайте введем имя .morph.
   
   
5. Далее нам нужно выбрать действие, которое запустит переход. В меню Transition On выберите Hover, чтобы переход сработал, когда мы наведем указатель мыши на ссылку. Другие варианты включают: активный, отмеченный, отключенный, включенный, фокус, зависание, неопределенность и цель.
   
   
6. Для опции меню у нас есть два варианта. Давайте выберем первое.
   
   Используйте один и тот же переход для всех свойств
   Используйте разные переходы для каждого свойства
   
   
7. Для продолжительности и задержки перехода мы можем использовать секунды или миллисекунды. Давайте установим Duration на 1 секунду, а Delay на 0,05 секунды.
   
   
8. Для функции синхронизации у нас есть несколько вариантов смягчения. Давайте выберем Ease Out.
   
   
9. Чтобы добавить свойство CSS, щелкните значок «плюс» и выберите его во всплывающем списке. Давайте выберем Background-Color.
   
   
10. После того как мы выбрали свойство, мы можем установить конечное значение для перехода. В зависимости от выбранного нами свойства, меню «Конечное значение» предоставит нам соответствующее меню для этого свойства. Для цвета фона мы получаем палитру цветов. Если мы добавим свойство Font-Weight, мы получим меню с заданными весами.
    
    
11. Наконец, нам нужно выбрать, где создать переход. Мы выбираем только этот документ или новый файл таблицы стилей. Давайте использовать первый.
    
    

После того, как мы нажмем кнопку «Создать переход», мы увидим, что переход был указан на панели «CSS-переходы», указывая на то, что морф-переход будет вызван действием наведения и применен к цели a.morph.

Если мы проверим представление кода, то увидим, что класс morph был добавлен в ссылку.

Когда мы наведем указатель мыши на ссылку в режиме реального времени, цвет фона изменится.

Но что если нам нужно отредактировать переход? Мы можем сделать это через панель CSS Transitions.

1. Выберите переход a.morph, и значок «Редактировать» станет активным (значок карандаша).
   
   
2. Щелкните значок «Редактировать», чтобы открыть диалоговое окно «Редактировать переход». Здесь мы можем изменить значения по мере необходимости или добавить новое свойство и конечное значение.
   
   

Теперь, когда мы создали морфный переход, мы можем легко применить его к другим элементам, потому что он теперь доступен из меню Target Rule.

* Adobe предоставила мне копию этого программного обеспечения для ознакомления.

Copyright 2018 Adobe Systems Incorporated. Все права защищены. Снимки экрана продукта Adobe перепечатаны с разрешения Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, способствуют, Captivate, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.

Видео инструкция: CSS3 Анимация - Переходы (Transition) (June 2024).