CSS Անիմացիա եւ դրա հնարավորությունները

Հետաքրքրում, թե ինչպես կարելի է կատարել անիմացիոն CSS, շատ օգտվողները գնալ որոնման դասերի եւ հրահանգների. Եւ թեեւ նման ցուցումները կարելի է գտնել այստեղ, ի թիվս այլ բաների, մենք ձեզ հիմնական օգտակար խորհուրդներ ստեղծման անիմացիայի օգտագործելով CSS.

իդեալական զարգացման համար գաղտնիք

Խորհուրդներ, որոնք կարող է տալ նրանց, ովքեր ցանկանում են իմանալ, թե լիովին ինչ է հարթ անիմացիոն CSS, հետեւյալն է. Երբ օրական փորձեր նախապատրաստված կտոր օրենսգրքի եւ փորձում են իրականացնել իրենց սեփական փորձեր: Է ազատ ժամանակն աշխատում է իրենց սեփական կայքերը, փորձեք տեսնել, թե ինչ է տեղի ունենում, ինչպես ծալովի մի կտոր կոդը, ուսումնասիրել այս կամ այն գույքը ամբողջությամբ. Փորձում է իրականացնել բոլոր տեսակի հետաքրքիր գաղափարներ, օգտագործելով մի բոլորովին տարբեր լեզվական գործիքներ, եւ CSS անիմացիա կբացվի ձեզ համար մի նոր ճանապարհով: Այս պարզ խորհուրդներ է սա էքսպերիմենտ ինքներդ.

CSS-անիմացիոն տեսքը

Եւ հիմա հետաքրքիր օրինակների: Որպես կանոն, ստանդարտ օգտագործումը անիմացիայի է փոխել որոշ տարրեր կայքի աստիճանաբար ժամանակի ընթացքում: Բայց սա շատ ակնհայտ է, չէ? Այնպես որ, այստեղ մենք կիսվել ձեզ հետ արտահերթ ճանապարհ օգտագործելու ժամանակը տեսքը անիմացիայի.

Այն փաստը, որ փաստացի փոփոխությունները կայքում մի կտոր անիմացիայի կամ իր ամբողջության մեջ կարող է լինել գրեթե ակնթարթային: Որպեսզի դա անել, մենք խնդրում ենք, ցանկացած երկու առանցքային կադրերը, սակայն օգտագործել է մի շատ փոքր շրջանակ: Օրինակ, դա կարող է լինել հավասար է 0,001%: Այս դեպքում, CSS անիմացիա կարող է տեղի ունենալ ակնթարթորեն. Դա կատարյալ մոդելավորման նեոնային նշան: Այս նշանը, որ առկայծում, իսկ եթե անիմացիոն CSS, ապա պետք է ավելի շատ թափանցիկություն եւ օգտագործել, եւ խաղարկային text-ստվերը, նշանը կլինի գրեթե նման է իրական բան.

Ահա մի օրինակ կոդը:

Բարելավել ֆունկցիոնալ կոճակները

Եթե հաշվի առնենք, որ հարցը, թե ինչ կարող է լինել անսովոր CSS-անիմացիա կոճակը, կարելի է ասել, որ ձեւավորում ընտրանքներ կոճակը կայքեր մեծ հավաքածու: Հաշվի առնել մեկ օրինակ: The ազդեցությունը սեղմելով ուռուցիկ կոճակները. Կոդի օրինակ - ստորեւ.

Նման պարզ կտոր անիմացիոն CSS բլոկի օրենսգրքի կանդրադառնա բավականին լավ: Այն շատ հետաքրքիր է եւ հաճախ օգտագործվում է բոլորովին տարբեր վայրերում:

CSS-անիմացիա, երբ դուք անցեք կայքում պատառներ

Դինամիկ եւ ժամանակակից կայքը, ավելի երկար է մնում է օգտագործողը: Բացի այդ, կարեւոր դեր է նաեւ խաղացել է ինտերակտիվության. Սա, իհարկե, ճիշտ է, բայց այն, ինչ կարող է օգնել, որպեսզի կայքը, ինչպես նաեւ ինտերակտիվ, որքան հնարավոր է.

Շատ լավ է, ապա նայեք է աշխատել նախագծային տարրերի ու հուշերի պատառիկներ կայքում, երբ մկնիկը. Անիմացիոն կոճակներ, երբ դուք անցեք մենք քննարկել ենք վերեւում, բայց բացի այդ, դուք կարող եք «վերակենդանացնել» եւ տարբեր կտոր կայքում, դարձնելով նրանց առավել նորաձեւ. Ինչպես մնացած ամեն ինչ, որ հիմնական սկզբունքն այստեղ չեն չափազանցել այն.

Այնպես որ, կա հիանալի անցում գույքը, որը կարող է տեւել մինչեւ չորս ունեցվածքի.

Ընթացքում մի որոշ ժամանակ CSS-անիմացիա, երբ դուք անցեք այս կտոր կոդը կփոխվի: Ժամանակն է, որոշվում է տեւողությունը գույքը: Այսինքն, երբ դուք անցեք մի կետի, այն սկսվում է առանձնահատուկ փոխել ցանկացած գույք, որ մենք սահմանել է selector. Մեր դեպքում դա - .element (կետն հարձակվող): Ինչ-որ չափով ներքեւինը օրինակ է օրենսգրքի, երբ անցումը կոնտեյներների div, որն ունի կեղծ .hover, ապա հետին պլանի փոխում կարմիր, կանաչ:

Երբ օգտատերը թեւածում մուկ CSS անիմացիոն չի փոխել անհապաղ, բայց հետաձգվել է ինչ-որ մասն երկրորդ, որն ստեղծում է հետաքրքիր էֆեկտ:

Բացի այդ, եթե նախորդ օրինակում, դուք խնդրել է մի որոշակի կանոն, որը ֆոն է div տարր էր փոխվել կարմիր, կանաչ եւ շարժվել ընթացքում 0.4 վայրկյանում, ապա պետք է նշել, որ, օգտագործելով արժեքը ամենը, դուք կարող եք բողոքարկել է ամբողջ ամբողջ գույքով անմիջապես.

Sample կոդը է հետեւյալ կերպ.

Ինչպես ցույց է հատկությունների լիցք եւ ֆոնային անցումային մտնելը կարող է տեղի ունենալ, որը հաստատակամ անցումային սեփականությունն է: Դուք պետք է նկատի ունենալ, որ դուք կարող եք ձեւակերպել ստորակետով առանձնացված որոշակի շարք արժեքներ:

Որոշ նրբություններ օգտագործելով այս տեսակ անիմացիոն վրա կոճակներ

Սկզբունքորեն, որ երկարաժամկետ հեռանկարում դա այնքան էլ կարեւոր չէ, թե ինչ նպատակով պետք է նշված, եւ փոխանցվում է տվյալների արժեքների. Բացառությամբ մեկ դեպքում. Մենք կարող ենք զբաղվել է ուշացումով սեփականության. Այս դեպքում, մենք պետք է նշեք տեւողությունը եւ ժամանակը. Այլ կերպ ասած, մենք պետք կոդը է ասել, թե որքան երկար է, շատ անհրաժեշտ է մեզ ուշացումը տեղի կունենա:

Հաշվի առնելով, որ որոշ հատկությունները չեն կարող լինել ազդեցությունը անցման. Այսինքն, նրանք չեն կարող լինել անցողիկ: Դա պայմանավորված է այն հանգամանքով, որ դրանք չեն կարող անիմացիոն.

տեքստային անիմացիա

Օգնությամբ օրենսգրքի, կարող է սահմանել եւ գերազանց անիմացիոն CSS տեքստի. Սա կարող է լինել ինչ - որ հոդված, եւ խոշոր կոչում, կայք կոչումը: Ինչպես վերը նշվեց, հիմնական բան չեն չափազանցել այն եւ չեն դիմել ձեր կայքի մեջ աղբավայր, որը կանդրադառնա էժան.

Դե ինչ, եկեք փորձենք պարզել, թե ինչ է CSS անիմացիոն տեքստի, եւ ստեղծել այն, եւ տեքստային ստվեր: Թերեւս դուք տեսել սարսափ ֆիլմեր, որտեղ անունները, նկարների իրենք կարծես մարել ցանկացած dim-մութ ֆոնի վրա: Փորձենք վերստեղծել մի ընդհանուր օրինակը նման բան:

Ոգեվորված տեքստը ոճով սարսափ ֆիլմերի

Ըստ էության, ամբողջ գաղափարն այն է, որպեսզի տեքստը, որի տառերը, որոնք մի քիչ մշուշոտ ու չէր պտտել: Որուն մէջ միջեւ նամակներ պետք է լինի մի տեղ: Մենք կօգտագործենք interalphabetic երանգ, ինչպես նաեւ ընդմիջումից. Որպեսզի իրականացնել այն միտքը, որ մենք պետք է սցենար Lettering.js հեղինակային Դեյվ Rupert. Նա պետք է պատել խոսքերը գումարած մի քանի նամակներ է հատկորոշիչը span. Առաջին, դուք պետք է փաթեթավորեք արտահայտությունը h2 թեգով: Ահա մի օրինակ կոդը:

Ապա obernom բոլոր բառերը H2 պիտակների tag span:

Այն տեղի է ունենում այսպես.

Դա կանդրադառնա փոքր - ինչ դժվար է, բայց չեն թողնում, որ անհանգստացնել:

Manic ձեռք բերել բավականաչափ կառուցվածքը:

Որպես հետեւանք, մենք ունենք մեր յուրաքանչյուր գոյություն ունեցող տառերով փաթաթված մի tag span. Նրանք պարզվեց իսկապես շատ. Բայց օրինակը բավականին պարզունակ է, որ օրենսգրքի վերեւում հանգեցրել: Նրանց ամբողջ կառուցվածքը, դուք կարող եք գրել ձեզ, եւ դա կլինի մի քանի ավելի. Դա կախված է նաեւ, թե ինչպիսի տեքստի ուզում եք օգտագործել.

Մենք եզրակացնել մեր աշխատանքը մի քիչ stylized: Մեր բոլոր կոչումներից եւ Վերը նշված օրինակում, տեղակայված կլինի ողջ լայնությամբ էկրանին. Եւ նրանք կտեւի մինչեւ գրեթե բոլոր մատչելի տարածք.

Քանի որ մենք պատրաստվում ենք տեղադրել մեր բոլոր տառերի կենտրոնացած է էկրանին, ապա, մեր կոնտեյներ, եւ մենք նույնպես պետք flexbox:

Ահա մի օրինակ է իր օրենսգրքի:

Այժմ մենք արել այնպես, որ բոլոր տառերը, որոնք փաթաթված մի span class, որը պատկանում է ծնող կարգի .os-արտահայտություններ, կլինի գտնվում եւ կցվում է դրա կեսին:

Մի մոռացեք ավելացնել մի քիչ ազատ տարածություն, որ ինքնին նամակ կաշխատեցվի:

Այս դեպքում է, որ առաջին փաթաթան ցանկանում է ունենալ որոշակի լրացուցիչ հատկությունները: Այս գույքը հեռանկարային. Այն մեզ հնարավորություն կտա, որպեսզի համոզվեք, որ այս կայքը կլինի նման է առանձնանա, գալիս է նախա:

Իրենք, որպես մեր տառերը կլինի թափանցիկ, եւ մենք ձեռնամուխ կլինի մի շարք անիմացիոն նրանց համար ինչ-որ տեղ է 5.2 վայրկյան: Ստորեւ բերված - օրինակը կոդը.

Այն նաեւ կարեւոր է պարզել, թե ինչպես եւ ինչ ուշացումը կհայտնվի մեր նախադասություններ եւ արտահայտություններ: Որը մասերի տեքստի կհայտնվի ավելի արագ, քան նախորդը, եւ որքան: Կոդը կանդրադառնա հավանում են սա:

Եկեք մի փոքր, բայց շատ հետաքրքիր էֆեկտ: Տեղադրել անթափանցիկություն 0.2. Interalphabetic հեռավորությունը դրանով կլինի բավականին մեծ է: Նամակներ կլինի նաեւ պտտվող մի քանի առանցքի Y. Տես քեզ, ինչպես նաեւ օգտվողները Ձեր կայքի կլինի միայն մի փոքր մասն է այդ նամակների. Բացի այդ, մի մոռացեք տալ ազդեցությունը հատկությունների տեքստով-ստվերի. Կես անիմացիա, մենք անսովոր բան: Մենք ենք կուղղի տառերը իրենց, ինչպես նաեւ նվազեցնել հեռավորությունը, որը նրանց միջեւ, եւ ապա բարձրացնել անթափանցիկություն, եւ հետո povernom նշանների վրա 0 առանցքի Y.

Ի վերջո, մենք կրկին ավելացնել մի քանի նամակներ, կամ վտանգված promasshtabiruem դրանք: Սա թույլ կտա նոր փոքր Բլուր ազդեցություն:

Եւ վերջապես վերջին արտահայտությունը CSS, անիմացիոն.

Եվ, այո, ի վերջո ավելացնել վերջնական touch: Մենք պետք է կենտրոնանալ որոշակի բառերի: Նրանք կունենան համարձակ դեմքը: Այս կտա անհրաժեշտ շեշտադրումն:

Մի մոռացեք մասին գնացող

Երբ փորձում եք փորձարկել ինքներդ ձեզ հետ հատկությունների եւ CSS անիմացիայի, փորձում են գտնել ոգեշնչում ամեն ինչ առօրյա կյանքում: Սա կարող է լինել ինչ - որ բան է հետաքրքիր վեբ էջերի ինչ-որ հրաշալի վիդեո ուժի.

Բացի այդ, եթե դուք չեք մարդ, թե ինչպես պետք է դա անել այս կամ այն ազդեցություն, եւ փորձում է վերստեղծել այն իրենց սեփական, դուք կարող եք հասնել մեծ արդյունքների: Կամ, առնվազն, միշտ սովորում է ավելի շատ բան հնարավորությունների մասին է ծրագրավորման լեզվի, որ դուք, փաստորեն, օգտագործել այն. Նույնիսկ լիովին հասկացա, ձեր գաղափարը կարող է ապացուցել, որ բավական տպավորիչ.