Hoe gemanipuleerde randen animeren met CSS

Versierde randen kunnen elk element op de pagina versieren, maar de CSS-grenzen zijn beperkt als het gaat om stijl. Ontwikkelaars komen vaak met oplossingen zoals CSS-gradiëntgrenzen, SVG-grenzen, meerdere randen en meer om het uiterlijk van boxgrenzen en de animaties ervan na te bootsen en te verbeteren..

Vandaag gaan we op zoek naar een eenvoudigere hack voor onderbroken randen: onderbroken randanimatie. De geanimeerde gestreepte rand wordt alleen met behulp van schets en box-shadow, geen gedoe achterlaten met fallbacks, sinds schets wordt vanaf IE8 ondersteund. Op die manier kan de gebruiker de randen nog steeds zien in tegenstelling tot wanneer SVG of gradiënt wordt gebruikt. Hiermee kunt u ook tweekleurige streepjes maken. Laten we kijken.

De grenzen creëren

We zullen eerst de grenzen creëren. Hiervoor gebruiken we een stippellijn en een doosschaduw.

 .banners outline: 6px geel gestippeld; vakschaduw: 0 0 0 6px # EA3556; ... 

De schets zal al zijn waarden nodig hebben; breedte, type en kleur. De box-shadow heeft alleen de waarde voor nodig verspreiding welke hetzelfde zou moeten zijn als de breedte en de kleur van de omtrek. Zowel de omtrek als de doosschaduw samen zullen het effect van tweekleurige streepjes creëren.

U kunt vervolgens de breedte of hoogte van het vakje aanpassen voor de gewenste rand en de hoeken bekijken.

De grenzen animeren

Voor ons eerste animatievoorbeeld voegen we CSS-hoofdframe-animaties toe aan een set banners waarbij de randen continu worden geanimeerd en aandacht krijgen. Voor het animatie-effect wisselen we eenvoudig de kleuren van de omtrek en doosschaduw.

@keyframes animeborder to outline-color: # EA3556; vakschaduw: 0 0 0 6px geel; 

U kunt de kleur van de omtrek gebruiken met outline-color eigenschap uit de lange termijn, maar voor doosschaduw moet je voorlopig alle waarden aan de eigenschap stenografie geven.

Zodra de animatie klaar is, voeg je deze toe aan de box.

.banners outline: 6px geel gestippeld; vakschaduw: 0 0 0 6px # EA3556; animatie: 1s animerenBorder oneindig; ...

Overgangen aan de randen

Voor het overgangsvoorbeeld voegen we randen toe aan afbeeldingen en animeren we die met zweven. U kunt ook de randafmetingen voor verschillende effecten wijzigen.

.foto's outline: 20px gestreept # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; overgang: alle 1s; ... .photos: hover outline-color: # 3CFDD3; vakschaduw: 0 0 0 20px # 006DB5; 

Beweeg nu over deze afbeeldingen om uw CSS gestippelde randen in al zijn geanimeerde glorie te zien.

Klaar is kees. Je kunt proberen om streepjes met gestippelde randen te vervangen, maar het effect is misschien niet goed. U kunt het outline-type tijdens animatie ook wijzigen voor nog een paar effecten.