Ako animovať prerušovanú hranicu pomocou CSS
Zdobené hranice môžu zdobiť ľubovoľný prvok na stránke, ale hranice CSS sú obmedzené, pokiaľ ide o štýl. Vývojári často prichádzajú s riešeniami, ako sú hranice CSS gradientu, hranice SVG, viacero okrajov a ďalšie, ktoré napodobňujú a inovujú vyzerajúci okraj okien a jeho animácie.
Dnes sa budeme pozerať na jednoduchší hack pre prerušované hranice: prerušovaná hraničná animácia. Animované prerušované okraje budú vytvorené iba obrys a box-shadow, takže ponechať žiadny rozruch o zálohách, pretože obrys je podporovaný z IE8 ďalej. Týmto spôsobom bude používateľ stále vidieť hranice na rozdiel od SVG alebo gradientu. Týmto môžete vytvoriť aj bicolorované pomlčky. Pozrime sa.
Vytváranie hraníc
Najskôr vytvoríme hranice. Za týmto účelom budeme používať prerušený obrys a tieň na skrinku.
.bannery outline: 6px dashed yellow; box-tieň: 0 0 0 6px # EA3556; ...
obrys bude potrebovať všetky svoje hodnoty; šírku, typ a farbu. box-shadow potrebuje len hodnotu pre nátierka čo by malo byť rovnaké ako šírka osnovy a jej farba. Oba obrysy a tieň v krabici vytvoria efekt dvojfarebných pomlčiek.
Potom môžete nastaviť šírku alebo výšku skrinky pre požadovaný pohľad na okraj v rohoch.
Animácia hraníc
Pre prvý príklad animácie pridáme animácie kľúčových snímok CSS do množiny bannerov s hraničnými okrajmi animácie, ktoré získavajú pozornosť. Pre animačný efekt jednoducho vymeníme farby obrysu a stíhacieho boxu.
@keyframes animateBorder do outline-color: # EA3556; box-tieň: 0 0 0 6px žltá;
Farbu obrysu môžete zacieliť pomocou obrys-color dlhodobé vlastníctvo, avšak pre tieň v boxe musíte pre túto chvíľu dávať všetky hodnoty vlastnosti skrátenej hodnoty.
Akonáhle je animácia pripravená, pridajte ju do poľa.
.bannery outline: 6px dashed yellow; box-tieň: 0 0 0 6px # EA3556; animácia: 1s animateBorder nekonečná; ...
Prechody na hraniciach
Pre príklad prechodu pridáme okraje obrázkov a animujeme ich na vznášačke. Môžete tiež zmeniť veľkosť okraja pre rôzne efekty.
.fotografie outline: 20px dashed # 006DB5; box-tieň: 0px 0px 0px 20px # 3CFDD3; prechod: všetky 1s; ... .photos: vznášať outline-color: # 3CFDD3; box-tieň: 0 0 0 20px # 006DB5;
Teraz umiestnite kurzor myši nad tieto obrázky, aby ste videli svoje hranice CSS prerušené v celej svojej oživenej sláve.
A to je zábal. Môžete skúsiť nahradiť prerušované okraje bodkovanými, ale účinok nemusí byť tak dobrý. Počas animácie môžete meniť aj typ osnovy pre niekoľko ďalších efektov.
