CSS3 pārejas Dreamweaver CS6

• Maijs 17, 2024

Pievienojot HTML5 un CSS3, interaktīvās vietnes kļūst gaidītas. Tagad ar Dreamweaver^R CS6 un jauno CSS pāreju paneli, jūs varat izveidot savus interaktīvos efektus, neprasot nekādu kodu. Šī procesa rezultāts ir tikai CSS3, bez JavaScript. Tāpēc jums nav jāuztraucas, ja skatītājs ir iespējojis JavaScript. Dreamweaver izveidotās pārejas var atskaņot jebkurā modernā tīmekļa pārlūkā.

Redzēsim, cik viegli ir izveidot savas interaktīvās pārejas. Pāreju var piemērot jebkuram klases, ID vai CSS elementam. Viss, kas mums jādara, ir CSS Transitions paneļa vērtību iestatīšana.

1. Mūsu pirmais solis ir izvēlēties elementu, kuram mēs vēlamies piemērot pāreju. Mūsu piemērā tā būs izvēlnes saite.
   
   
2. Noklikšķiniet uz Window - CSS Transitions, lai atvērtu paneli.
   
   
3. Lai pievienotu pāreju, CSS pārejas panelī noklikšķiniet uz zīmes Plus.
   
   
4. Dialoglodziņā Jauna pāreja mēs varam izmantot izvēlni Mērķa noteikums, lai izvēlētos no sākotnējiem iestatījumiem vai ierakstītu savu vārdu pārejai. Ierakstīsim vārdu .morph.
   
   
5. Tālāk mums jāizvēlas darbība, kas izraisīs pāreju. Izvēlnē Transition On atlasiet kursoru kursoru tā, lai, novietojot peli virs saites, notiks pāreja. Citas izvēles iespējas ir: aktīva, pārbaudīta, atspējota, iespējota, fokusēšana, virzīšana, nenoteikta un mērķa darbība.
   
   
6. Izvēlnes opcijai mums ir divas izvēles. Izvēlēsimies pirmo.
   
   Visiem īpašumiem izmantojiet to pašu pāreju
   Katram īpašumam izmantojiet atšķirīgu pāreju
   
   
7. Pārejas ilgumam un kavējumam mēs varam izmantot sekundes vai milisekundes. Iestatīsim ilgumu uz 1 sekundi un atlikšanu uz 0,05 sekundi.
   
   
8. Laika noteikšanas funkcijai mums ir vairākas izvēles iespējas. Izvēlēsimies Vienkāršot.
   
   
9. Lai pievienotu CSS rekvizītu, noklikšķiniet uz zīmes Plus un uznirstošajā sarakstā izvēlieties vienu. Mēs izvēlēsimies fona krāsu.
   
   
10. Kad esam izvēlējušies īpašumu, mēs varam iestatīt pārejas beigu vērtību. Atkarībā no tā, kādu īpašumu esam izvēlējušies, izvēlne Beigu vērtība sniegs mums atbilstošo šī īpašuma izvēlni. Fona krāsai mēs iegūstam krāsu atlasītāju. Ja pievienojam īpašību Fonts-svars, iegūstam iepriekš iestatītu svaru izvēlni.
    
    
11. Visbeidzot mums jāizvēlas Kur izveidot pāreju. Mēs izvēlamies tikai šo dokumentu vai jaunu stila lapu failu. Izmantosim pirmo.
    
    

Tiklīdz mēs esam noklikšķinājuši uz pogas Izveidot pāreju, mēs redzam, ka pāreja ir uzskaitīta CSS pāreju panelī, norādot, ka morf pāreju izraisīs lidmašīnas darbība un tiks piemērota a.morph mērķim.

Ja mēs pārbaudām koda skatu, mēs redzam, ka saitei ir pievienota morph klase.

Pārvietojot peles kursoru virs saites tiešajā skatā, fona krāsa mainīsies.

Bet ko tad, ja mums vajadzēs rediģēt pāreju? Mēs to varam izdarīt, izmantojot CSS pāreju paneli.

1. Atlasiet a.morph pāreju, un rediģēšanas ikona kļūs aktīva (zīmuļa ikona).
   
   
2. Noklikšķiniet uz ikonas Rediģēt, lai atvērtu dialoglodziņu Rediģēt pāreju. Šeit mēs varam mainīt vērtības pēc nepieciešamības vai pievienot jaunu īpašumu un beigu vērtību.
   
   

Tagad, kad morph pāreja ir izveidota, mēs to varam viegli piemērot citiem elementiem, jo ​​tagad tā ir pieejama izvēlnē Target Rule.

* Pārskatīšanas nolūkos Adobe man iesniedza šīs programmatūras kopiju.

Autortiesības 2018 Adobe Systems Incorporated. Visas tiesības aizsargātas. Adobe produkta ekrānuzņēmums (-i) ir pārpublicēts ar Adobe Systems Incorporated atļauju. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper ir / ir vai nu [a] reģistrēta preču zīme (-es), vai Adobe Systems Incorporated preču zīme (-es) Amerikas Savienotajās Valstīs un / vai citās valstīs.