CSS3 Transitions- ը ստեղծում է գեղեցիկ դանդաղեցումներ
Վեբ դիզայներները երկար ժամանակ ցանկացել էին ավելի շատ վերահսկել այն էջերը, որոնք ստեղծում էին CSS3- ը հարվածելիս: CSS3- ում ներկայացված նոր ոճերը վեբ մասնագետներին հնարավորություն տվեցին Photoshop- ի նման էջեր ավելացնել իրենց էջերում: Դա ընդգրկում էր հատկություններ, ինչպիսիք են ` կաթիլ ստվերները եւ փայլերը , կլորացված անկյունները եւ այլն: CSS3- ը նաեւ ներկայացրեց անիմացիոն նմանատիպ էֆեկտներ, որոնք կարող են օգտագործվել կայքերում գեղեցիկ ինտերակտիվություն ստեղծելու համար:
Մեկը շատ լավ տեսողական ազդեցություն կարող եք ավելացնել ձեր էլեմենտներին CSS3- ի միջոցով տարրեր ավելացնելու համար `դրանք անթափանցիկության եւ անցում կատարելու համար հատկություններ օգտագործելով: Սա հեշտ եւ լավ աջակցվող միջոց է, որպեսզի ձեր էջերը ավելի ինտերակտիվ դարձնեն, խթանել տարածքները, որոնք կենտրոնանում են այն ժամանակ, երբ կայքի այցելուն ինչ-որ բան է անում, ինչպես շարժվելով այդ տարրի վրա:
Եկեք նայենք, թե որքան հեշտ է այս ինտերակտիվ վիզուալ ազդեցությունը ավելացնել ձեր տարբեր էջերում տարբեր տարրեր:
Թեքեք փոխելու անթափանցիկությունը
Սկսենք նայելով, թե ինչպես փոխել պատկերի անթափանցքը, երբ հաճախորդը սահում է այդ տարրի վրա: Այս օրինակի համար (HTML- ը ստորեւ նշված է), ես օգտագործում եմ պատկեր, greidout դասի հատկանիշով:
Այն գորշ է դարձնելու համար մենք ավելացնում ենք հետեւյալ ոճի կանոնները մեր CSS ոճերի էջում.
.greydout {
-հայտնաբերված անփոփոխություն. 0.25;
-մազ-անփոփոխություն. 0.25;
անթափանցիկություն. 0.25;
}
Այս անթափանցիկության պարամետրերը թարգմանվում են 25%: Սա նշանակում է, որ պատկերը կցուցադրվի որպես նորմալ թափանցիկության 1/4: Թափանցիկությամբ լիովին անթափանց կլիներ 100 տոկոսը, իսկ 0 տոկոսը `ամբողջովին թափանցիկ:
Հաջորդը, պատկերն ավելի պարզ դարձնելու համար (կամ ավելի ճշգրիտ, դառնալով լիովին անփառունակ), երբ մկնիկը կախված է դրա վրա, կցանկանաք ավելացնել հետեւյալը. Սավառնել դասի դաս:
հարգելի: hover {
-հաղորդիչ-անթափանցություն. 1;
-մազ-անթափանցություն. 1;
անթափանցություն `1;
}
Դուք կիմանաք, որ այս օրինակների համար ես օգտագործում եմ վաճառողի նախնական տարբերակները, ապահովելու այդ բրաուզերների հին տարբերակների հետ համատեղելիությունը: Թեեւ դա լավ պրակտիկա է, իրականությունն այն է, որ անփոփոխության կանոնն այժմ լավ է ապահովում բրաուզերների կողմից, եւ դա բավականին անվտանգ է այն վաճառողի նախածրած գծերը: Այնուամենայնիվ, ոչ մի պատճառ չկա նաեւ չհրապարակել այս նախածանցերը, եթե ցանկանում եք ապահովել աջակցություն ավելի հին բրաուզերի տարբերակների համար: Պարզապես պետք է հետեւեք ոճի նորմալ, անսահմանափակ տարբերակով հռչակագրի ավարտի ընդունված լավագույն փորձին:
Եթե դուք տեղադրեիք այս կայքում, ապա կտեսնեք, որ այս անթափանցիկության ճշգրտումը շատ կտրուկ փոփոխություն է: Նախ `գորշ է, ապա դա ոչ թե միջանկյալ պետություններ են այդ երկուների միջեւ: Այն նման է լույսի միացմանը, կամ անջատելը: Սա կարող է լինել այն, ինչ ուզում եք, բայց դուք կարող եք նաեւ փորձել այն աստիճանի փոփոխություն:
Հատկապես գեղեցիկ ազդեցություն ավելացնելու եւ աստիճանաբար դանդաղեցնելու համար ցանկանում եք անցումային գույքը ավելացնել: greydout դասի:
.greydout {
-հայտնաբերված անփոփոխություն. 0.25;
-մազ-անփոփոխություն. 0.25;
անթափանցիկություն. 0.25;
-webkit-transition: բոլոր 3s հեշտությամբ;
-մազ-անցում. բոլոր 3s հեշտությամբ;
-ms-transition: բոլոր 3s հեշտ;
-o- անցում `բոլոր 3s հեշտությամբ;
անցում `բոլոր 3s հեշտությամբ;
}
Այս օրենսգրքով փոփոխությունը աստիճանաբար անցնելու է, այլ ոչ թե պարզապես կտրուկ փոխելու:
Կրկին, մենք այստեղ օգտագործում ենք մի շարք վաճառողի նախադրյալ կանոններ: Անցումը ոչ թե անթափանց է, այլ այդ սկզբունքները իմաստ են դարձնում:
Մի բան հիշեք, երբ այդ պլանավորումը պլանավորեք, այն է, որ սենսորային էկրանային սարքերը չունեն «սավառնել» պետություն, ուստի այդ ազդեցությունները հաճախ կորցնում են որեւէ մեկին, օգտագործելով բջջային հեռախոսի նման սենսորային էկրան: Անցումը հաճախ տեղի է ունենալու, բայց դա տեղի է ունենում այնքան արագ, որ նրանք իսկապես չեն կարող տեսնել: Դա լավ է, եթե սա ավելացնում եք որպես լավ բոնուսային ազդեցություն, սակայն խուսափեք ցանկացած փոփոխությունից, որը կարիք ունի դիտելու բովանդակության հասկանալու համար:
Fading Out- ը հնարավոր է
Դուք պետք չէ սկսել խուսափել պատկերից, կարող եք օգտագործել անցումներն ու անթափանցությունը, լիովին անթափանց կերպարից զերծ մնալու համար: Օգտագործելով նույն պատկերը, միայն մեկ դասի հետ:
class = "withfadeout">
Ինչպես նախկինում, դուք փոխում եք անթափանցիկությունը `օգտագործելով սլաքը:
.withfadeout {
-Վեբկիթ-անցում. բոլոր 2-ը հեշտացնում են:
-մազ-անցում. բոլոր 2-ը հեշտացնում են-դուրս.
-ms- անցում. բոլոր 2-ը հեշտացնում են-դուրս.
-o-անցում. բոլոր 2-ը հեշտացնում են:
անցում. բոլոր 2-ը հեշտացնում են:
}
.withfadeout: hover {
-հայտնաբերված անփոփոխություն. 0.25;
-մազ-անփոփոխություն. 0.25;
անթափանցիկություն. 0.25;
}
Այս օրինակում պատկերը կթողարկվի լիովին անթափանց, մի փոքր թափանցիկ `մեր առաջին օրինակին հակառակ:
Գնալով Beyond պատկերներ
Գերազանց է, որ դուք կարող եք կիրառել այդ տեսողական անցումները եւ պատկերները նկարել, բայց դուք չեք սահմանափակվում միայն այս CSS հետեւանքների հետ պատկերներ օգտագործելով: Դուք կարող եք հեշտությամբ կատարել CSS- հագեցած կոճակներ, որոնք սեղմվում եւ սեղմվում են: Պարզապես կկարգավորեք անփոփոխությունը `օգտագործելով ակտիվ կեղծ դասակարգը եւ անցեք անցումը դասին, որը սահմանում է կոճակը: Սեղմեք եւ պահել այս կոճակը, տեսնելով, թե ինչ է տեղի ունենում:
Հնարավոր է, ըստ էության, ցանկացած տեսողական տարր ձգձգվել, երբ սեղմված կամ սեղմված է: Այս օրինակում ես փոխում եմ անփոփոխությունը div- ի եւ գույնի տեքստը, երբ մկնիկը ավարտված է: Ահա CSS- ը:
#myDiv {
լայնությունը `280px;
background-color: # 557A47;
գույնը `#dfdfdf;
padding: 10px;
-Վեբկիթ-անցում. բոլոր 4-ը հեշտացնում են 0s;
-մազ-անցում. բոլոր 4-ը հեշտացնում են 0s;
-ms- անցում. բոլոր 4s հեշտացնում դուրս 0s;
-o- անցում `բոլոր 4s հեշտացնում դուրս 0s;
անցում. բոլոր 4s հեշտացնում դուրս 0s;
}
#myDiv: hover {
-հայտնաբերված անփոփոխություն. 0.25;
-մազ-անփոփոխություն. 0.25;
անթափանցիկություն. 0.25;
գույնը `# 000;
}
Նավիգացիոն բաժինները կարող են օգուտ քաղել ֆոնային գույներով
Այս պարզ նավարկության մենյուում ֆոնի գույնը դանդաղորեն ներխուժում է եւ դուրս է գալիս, քանի որ մկնիկը մենյուի իրերի վրա է: Ահա HTML:
- տուն
- CSS3 Tutorials
- CSS3 հատկությունները
Եվ այստեղ է CSS- ը:
ul # sampleNav {ցանկի ոճ `ոչ; }
ul # sampleNav li {
ցուցադրում `inline;
float: ձախ;
padding: 5px 15px;
margin: 0 5px;
-Վեբկիթ-անցում `բոլոր 2s գծային;
-մազ-անցում `բոլոր 2s գծային;
-ms- անցում `բոլոր 2s գծային;
-o- անցում `բոլոր 2s գծային;
անցում `բոլոր 2s գծային;
}
ul # sampleNav li ա {text-decoration: none; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
Զննարկչի օժանդակություն
Երբ ես անդրադարձել եմ արդեն մի քանի անգամ, այս ոճերը շատ լավ բրաուզերի օժանդակություն ունեն, այնպես որ դուք պետք է ազատ զգաք օգտագործել դրանք առանց որեւէ ցնցումների: Միակ բացառությունն այն է, որ Internet Explorer- ի շատ ավելի հին տարբերակները, սակայն Microsoft- ի վերջին որոշումը, վերջում ստորագրել 11-ից ներքեւ IE- ի բոլոր տարբերակների համար, այս հին բրաուզերները դառնում են պակաս եւ պակաս խնդիր, եւ իրականում, եթե հին բրաուզերը տեսեք այս խարխլման անցումը, որը չպետք է լուրջ խնդիր լինի: Քանի դեռ դուք սահմանափակվում եք այսպիսի ազդեցություններով, հաճելի փոխազդեցությունների համար եւ չեն հույսը դնում նրանց ֆունկցիոնալությունը վարելու կամ բովանդակության բովանդակության բացահայտման համար, ապա հին բրաուզերները, որոնք չեն աջակցում հետեւանքներին, ավելի քիչ հաճելի փորձ կստանան, սակայն այդ բրաուզերների օգտվողները գիտեք տարբերությունը, հատկապես, եթե նրանք կարողանան օգտագործել կայքի նորմալ եւ ստանալ այն տեղեկատվությունը, որն անհրաժեշտ է:
Լրացուցիչ զվարճանք, փոխանակեք երկու պատկեր
Ահա մի օրինակ, թե ինչպես կարելի է մեկ կերպարն այլ կերպ գցել: Օգտագործեք HTML:
Եվ CSS- ն, որը լիովին թափանցիկ է դարձնում, իսկ մյուսը լիովին թափանցիկ է, ապա անցումային փոխարինողը:
.swapMe img {-webkit-transition: բոլոր 1s հեշտությամբ- in- դուրս; -մազ-անցում. բոլոր 1-ը հեշտացնում է: -ms- անցում. բոլոր 1-ները հեշտացնում են: -o- անցում. բոլոր 1-ները հեշտացնում են: անցում. բոլոր 1-ները հեշտացնում են: } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -մազ-անթափանցություն. 1; անթափանցություն `1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -մազ-անփոփոխություն. 0; անթափանցություն `0; }