CSS3 üleminekud Dreamweaver CS6-s

• Mai 6, 2024

HTML5 ja CSS3 lisamisega on oodata interaktiivseid veebisaite. Nüüd koos Dreamweaveriga^R CS6 ja uue CSS-siirdepaneeli abil saate luua oma interaktiivseid efekte ilma, et peaksite koodi kirjutama. Selle protsessi väljund on ainult CSS3, ilma JavaScriptita. Seetõttu ei pea te muretsema, kui vaataja on JavaScripti lubanud. Dreamweaveri loodud üleminekuid saab mängida igas kaasaegses veebibrauseris.

Vaatame, kui lihtne on luua oma interaktiivseid üleminekuid. Üleminekut saab rakendada mis tahes klassi, ID või CSS elemendile. Kõik, mida peame tegema, on väärtuste seadmine paneelil CSS-i üleminekud.

1. Meie esimene samm on valida element, millele me soovime üleminekut rakendada. Meie näites on see menüülink.
   
   
2. Paneeli avamiseks klõpsake nuppu Window - CSS Transitions.
   
   
3. Klõpsake CSS-i üleminekute paneelil ülemineku lisamiseks plussmärki.
   
   
4. Dialoogiboksis Uus üleminek saame menüüd Sihtreegel kasutada, et valida eelseadete hulgast või sisestada üleminekuks oma nimi. Kirjutame nime .morph.
   
   
5. Järgmisena peame valima toimingu, mis käivitab ülemineku. Valige menüüst Üleminek sisse lülitatud Hover, nii et üleminek käivitub, kui asetame hiire lingi kohale. Muud valikud hõlmavad: aktiivne, kontrollitud, keelatud, lubatud, fookus, hõljutage, määramatu ja sihitud.
   
   
6. Menüüvaliku jaoks on meil kaks valikut. Valime esimese.
   
   Kasutage sama üleminekut kõigi atribuutide jaoks
   Kasutage iga atribuudi jaoks erinevat üleminekut
   
   
7. Ülemineku kestuse ja viivituse jaoks võime kasutada sekundeid või millisekundi. Valime kestuseks 1 sekund ja viivituseks 0,05 sekundit.
   
   
8. Ajastusfunktsiooni jaoks on meil mitu kergendavat valikut. Valime Ease Out.
   
   
9. CSS-i atribuudi lisamiseks klõpsake plussmärgil ja valige hüpikloendist üks. Valime taustavärvi.
   
   
10. Kui oleme valinud atribuudi, saame seada ülemineku lõppväärtuse. Sõltuvalt meie valitud omandist annab lõppväärtuse menüü meile selle vara vastava menüü. Taustavärvi jaoks saame värvilise valija. Kui lisame atribuudi Font-Weight, saame menüü eelhäälestatud kaaludega.
    
    
11. Lõpuks peame valima, kus luua üleminek. Meie valikud on Ainult see dokument või Uus stiilileht. Kasutagem esimest.
    
    

Kui oleme klõpsanud nupul Loo üleminek, näeme, et üleminek on loetletud CSS-i üleminekute paneelil, mis näitab, et morfi üleminek käivitatakse hõljumitoimingu abil ja rakendatakse a.morfi sihtmärgil.

Koodivaate kontrollimisel näeme, et lingile on lisatud morfiklass.

Kui liigutame hiire reaalajas vaates üle lingi, muutub tausta värv.

Aga mis siis, kui meil oleks vaja üleminekut redigeerida? Saame seda teha CSS-i üleminekute paneeli kaudu.

1. Valige üleminek a.morph ja redigeerimise ikoon aktiveeritakse (pliiatsi ikoon).
   
   
2. Dialoogiboksi Redigeerimine ülemineku kuvamiseks klõpsake ikooni Redigeerimine. Siin saame väärtusi vastavalt vajadusele muuta või lisada uue omandi ja lõppväärtuse.
   
   

Nüüd, kui morf-üleminek on loodud, saame seda hõlpsalt teistele elementidele rakendada, kuna see on nüüd saadaval menüüst Sihtreegel.

* Adobe edastas mulle selle tarkvara koopia ülevaatamiseks.

Autoriõigus 2018 Adobe Systems Incorporated. Kõik õigused kaitstud. Adobe toote ekraanipilt (ed) kordustrükis Adobe Systems Incorporated loal. 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 on / on kas [a] registreeritud kaubamärk (id) või Adobe Systems Incorporated'i kaubamärk (id) Ameerika Ühendriikides ja / või teistes riikides.

Video Juhiseid: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Mai 2024).