Переходи CSS3 у Dreamweaver CS6

• Може 20, 2024

З додаванням HTML5 та CSS3 інтерактивні веб-сайти стають очікуваними. Тепер із Dreamweaver^R CS6 та нову панель переходів CSS ви можете створювати власні інтерактивні ефекти без необхідності писати будь-який код. Результатом цього процесу є лише CSS3, без JavaScript. Тому вам не потрібно хвилюватися, чи переглядач увімкнув JavaScript. Переходи, створені Dreamweaver, можуть програвати в будь-якому сучасному веб-браузері.

Подивимося, як легко створювати власні інтерактивні переходи. Перехід може бути застосований до будь-якого елемента класу, ID або CSS. Все, що нам потрібно зробити, це встановити значення на панелі переходів CSS.

1. Наш перший крок - вибір елемента, до якого ми хочемо застосувати перехід. У нашому прикладі це буде посилання на меню.
   
   
2. Клацніть Вікно - Переходи CSS, щоб відкрити панель.
   
   
3. На панелі переходів CSS натисніть знак плюс, щоб додати перехід.
   
   
4. У діалоговому вікні «Новий перехід» ми можемо скористатися меню «Цільове правило» для вибору із заданих налаштувань або введення власного імені для переходу. Введемо ім’я .morph.
   
   
5. Далі нам потрібно вибрати дію, яка спровокує перехід. У меню "Перехід увімкнено" виберіть "Навести курсор", щоб перехід спрацьовував, коли ми кладемо мишу на посилання. Інші варіанти включають: активний, перевірений, відключений, включений, фокусування, наведення курсора, невизначений та націлений.
   
   
6. Для опції меню у нас є два варіанти. Виберемо перше.
   
   Використовуйте однаковий перехід для всіх властивостей
   Використовуйте різний перехід для кожної власності
   
   
7. Для тривалості та затримки переходу ми можемо використовувати секунди або мілісекунди. Давайте встановимо Тривалість на 1 секунду, а Затримка - на 0,05 секунди.
   
   
8. Для функції синхронізації ми маємо декілька варіантів полегшення. Давайте виберемо Ease Out.
   
   
9. Щоб додати властивість CSS, натисніть знак Plus і виберіть його зі спливаючого списку. Виберемо кольоровий фон.
   
   
10. Після того як ми вибрали властивість, ми можемо встановити кінцеве значення для переходу. Залежно від властивості, яку ми вибрали, меню Кінцеве значення надасть нам відповідне меню для цієї Властивості. Для фону "Колір" отримуємо "Вибір кольорів". Якщо додати властивість Font-Weight, ми отримаємо меню заданих ваг.
    
    
11. Нарешті нам потрібно вибрати, де створити перехід. Ми вибираємо лише цей документ або файл нового стилю. Давайте скористаємося першим.
    
    

Після натискання кнопки "Створити перехід" ми побачимо, що перехід вказаний на панелі переходів CSS, що вказує на те, що перехід морфінгу буде спровоковано дією наведення та застосовано до цілі a.morph.

Якщо ми перевіримо подання коду, ми побачимо, що клас morph був доданий до посилання.

Коли ми переходимо мишкою по посиланню в режимі Live View, колір фону зміниться.

Але що робити, якщо нам потрібно було відредагувати перехід? Це можна зробити за допомогою панелі переходів CSS.

1. Виберіть перехід a.morph, і піктограма "Правка" стане активною (піктограма олівця).
   
   
2. Клацніть піктограму «Редагувати», щоб відкрити діалогове вікно «Змінити перехід». Тут ми можемо змінити значення за потребою або додати нову властивість та кінцеве значення.
   
   

Тепер, коли ми створили перехід морфи, ми можемо легко застосувати його до інших елементів, оскільки він тепер доступний у меню Цільове правило.

* Adobe надіслала мені копію цього програмного забезпечення для ознайомлення.

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

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