Hogyan lehet animálni a szaggatott szegélyt CSS-el

A díszített szegélyek tetszőleges elemet díszíthetnek az oldalon, de a CSS határok korlátozottak a stílusban. A fejlesztők gyakran olyan megoldásokat találnak, mint a CSS-gradiens határok, az SVG-határok, a többszörös határok és még több, hogy utánozzák és frissítsék a dobozhatárok és animációinak megjelenését.

Ma megvizsgáljuk a szaggatott határok egyszerűbb hackjét: szaggatott szegély animáció. Az animált szaggatott szegélyt csak a segítségével hozza létre vázlat és box-shadow, nem hagyja el a haragot az elmaradások miatt vázlat az IE8-tól támogatott. Így a felhasználó továbbra is látni fogja a határokat, ellentétben az SVG vagy a gradiens használatával. Ezzel bicolored kötőjeleket is létrehozhat. Lássuk.

A határok létrehozása

Először hozzuk létre a határokat. Ehhez egy szaggatott vázlatot és egy doboz árnyékot fogunk használni.

 .bannerek körvonal: 6px szaggatott sárga; box-shadow: 0 0 0 6px # EA3556;… 

A vázlat szüksége lesz az összes értékére; szélesség, típus és szín. A box-shadow csak az értékre van szüksége terjedését meg kell egyeznie a vázlat szélességével és színével. Mind a vázlat, mind a doboz-árnyék együttesen kétszínű kötőjelek hatását eredményezi.

Ezután beállíthatja a doboz szélességét vagy magasságát, hogy a kívánt szegélyt nézze meg a sarkokban.

A határok animálása

Az első animációs példánkhoz a CSS kulcsfontosságú animációkat adjuk hozzá egy sor bannerekhez, amelyek a határok folyamatosan animálódnak, figyelmet szentelve. Az animációs hatásért egyszerűen kicseréljük a vázlat és a doboz árnyék színeit.

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

A körvonal színét célozhatja vázlat szín longhand tulajdonság, azonban a doboz árnyékához most minden értéket meg kell adnia a rövidített tulajdonságnak.

Ha az animáció kész, add hozzá a dobozhoz.

.bannerek körvonal: 6px szaggatott sárga; box-shadow: 0 0 0 6px # EA3556; animáció: 1s animateBorder végtelen;…

Átmenetek a határokon

Az átmeneti példa esetében határokat adunk hozzá a képekhez, és animáljuk azokat, amelyek a lebegőn vannak. A különböző hatások határméretét is módosíthatja.

.fotók vázlat: 20px szaggatott # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; átmenet: minden 1s;… .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Most vigyük át ezeket a képeket, hogy az animált dicsőségükben láthassuk CSS szaggatott szegélyeiket.

És ez egy csomag. Megpróbálhatod a szaggatott szegélyeket szaggatottakkal helyettesíteni, de a hatás nem biztos, hogy jó. Az animáció során a vázlat típusát is megváltoztathatja néhány további hatás érdekében.