Jak Anash Dashed Border s CSS

Zdobené okraje mohou ozdobit jakýkoliv prvek na stránce, ale hranice CSS jsou omezeny, pokud jde o styl. Vývojáři často přicházejí s řešeními, jako jsou hranice CSS-gradientu, hranice SVG, více hranic a více pro napodobování a upgrade vzhledu rámečků a jejich animací..

Dnes se podíváme na jednodušší hack pro přerušované okraje: animace hraničních hranic. Animovaný přerušovaný okraj bude vytvořen pouze pomocí obrys a box-stín, od té doby nezanechal žádné povyky o nouzových situacích obrys je podporován od IE8. Tímto způsobem bude uživatel stále schopen vidět okraje na rozdíl od použití SVG nebo gradientu. S tímto můžete také vytvořit dvoubarevné pomlčky. Podívejme se na to.

Vytvoření hranic

Nejdříve vytvoříme hranice. K tomu použijeme přerušovaný obrys a stín boxu.

 .bannery obrys: 6px přerušovaná žlutá; box-shadow: 0 0 0 6px # EA3556;… 

obrys bude potřebovat všechny své hodnoty; šířka, typ a barva. box-stín potřebuje pouze hodnotu pro rozpětí který by měl být stejný jako šířka obrysu a jeho barva. Obrys i rámeček spolu vytvoří efekt dvoubarevných pomlček.

Potom můžete nastavit šířku nebo výšku rámečku pro požadovaný vzhled ohraničení v rozích.

Animace hranic

Pro náš první příklad animace přidáme animace klíčových snímků CSS do sady bannerů s nekonečnými hranicemi, čímž se získá pozornost. Pro efekt animace jednoduše vyměníme barvy obrysu a boxu.

@ keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 6px žlutá; 

Barvu obrysu můžete zacílit barva obrysu longhand vlastnost, nicméně pro box stín budete muset dát všechny hodnoty na zkratku majetku pro tuto chvíli.

Jakmile je animace připravena, přidejte ji do pole.

.bannery obrys: 6px přerušovaná žlutá; box-shadow: 0 0 0 6px # EA3556; animace: 1s animateBorder nekonečno;…

Přechody Na Hranicích

Pro příklad přechodu přidáme okraje k obrázkům a animujeme ty, kteří jsou na přechodu. Velikost okrajů můžete také změnit pro různé efekty.

.fotografie outline: 20px přerušované # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; přechod: všechny 1s;… .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Nyní se pohybujte nad těmito obrázky a uvidíte, jak se vaše CSS přerušované hranice ve všech jeho animované slávě.

A to je zábal. Můžete zkusit nahradit přerušované okraje tečkovanými, ale efekt nemusí být dobrý. Můžete také změnit typ osnovy během animace o několik dalších efektů.