Како анимирати испрекидану границу са ЦСС-ом
Уређене границе могу украсити било који елемент на страници, али ЦСС границе су ограничене када је ријеч о стилу. Програмери често проналазе решења као што су границе ЦСС-градијента, СВГ границе, више граница и више за опонашање и надоградњу изгледа оквира оквира и његових анимација.
Данас ћемо размотрити једноставнији хацк за испрекидане границе: исцртане анимације граница. Анимирана испрекидана граница ће бити креирана само помоћу оутлине и бок-схадов, не оставља никакву гужву око повратка, јер оутлине подржава ИЕ8 даље. На тај начин ће корисник и даље моћи да види границе за разлику од СВГ или градијента. Овим можете креирати и двобојне цртице. Хајде да погледамо.
Креирање граница
Прво ћемо створити границе. За ово, користићемо испрекидану линију и сенку у кутији.
.банери оутлине: 6пк дасхед иеллов; бок-схадов: 0 0 0 6пк # ЕА3556;…
Тхе оутлине ће требати све њене вриједности; ширина, тип и боја. Тхе бок-схадов треба само вредност за спреад који би требао бити исти као и ширина контуре и њена боја. И обриси и кутија-сенка заједно ће створити ефекат двобојних цртица.
Затим можете подесити ширину или висину оквира за жељени изглед ивице на угловима.
Анимирање граница
За први пример анимације, додаћемо ЦСС анимације у сет банера са непрекидним анимацијама, привлачећи пажњу. За ефекат анимације једноставно ћемо замијенити боје сјенила оквира и оквира.
@кеифрамес аниматеБордер то оутлине-цолор: # ЕА3556; бок-схадов: 0 0 0 жуто;
Можете циљати боју контуре користећи боја обриса лонгханд проперти, међутим за бок схадов ћете за сада морати дати све вриједности скраћеном својству.
Када је анимација спремна, додајте је у оквир.
.банери оутлине: 6пк дасхед иеллов; бок-схадов: 0 0 0 6пк # ЕА3556; анимација: 1с аниматеБордер инфините;…
Транситионс Он Тхе Бордерс
За пример преласка додаћемо границе сликама и анимирати оне на лебдењу. Такође можете да промените величину границе за различите ефекте.
.Фотографии оутлине: 20пк дасхед # 006ДБ5; бок-схадов: 0пк 0пк 0пк 20пк # 3ЦФДД3; транситион: алл 1с;… .пхотос: лебдите оутлине-цолор: # 3ЦФДД3; бок-схадов: 0 0 0 20пк # 006ДБ5;
Сада, пређите преко ових слика да бисте видели да су ваши ЦСС испали границе у својој анимираној слави.
И то је омот. Можете покушати замијенити испрекидане границе точкастим, али ефекат можда није добар као. Такође можете да промените тип контуре током анимације за још неколико ефеката.
