Miten animoida katkoviiva CSS llä

Sisustetut reunat voivat koristaa mitä tahansa sivua, mutta CSS-rajat ovat rajalliset tyylin suhteen. Kehittäjät kehittävät usein ratkaisuja, kuten CSS-gradienttirajoja, SVG-rajoja, useita rajoja ja enemmän jäljittelemään ja päivittämään laatikkorien ja sen animaatioiden ulkonäköä.

Tänään tarkastelemme katkoviivojen yksinkertaisempaa hakata: katkoviiva-animaatio. Animoitu katkoviiva luodaan vain käyttämällä ääriviivat ja box-varjo, ei ole mitään hälytystä, sillä se on ollut ääriviivat on tuettu IE8: sta alkaen. Näin käyttäjä voi silti nähdä rajoja toisin kuin SVG: tä tai gradienttia käytetään. Tämän avulla voit myös luoda kaksivärisiä viivoja. Katsotaanpa.

Reunojen luominen

Luomme ensin rajat. Tätä varten käytämme katkoviivaa ja laatikon varjoa.

 .bannerit ääriviivat: 6px katkoviiva; box-shadow: 0 0 0 6px # EA3556;… 

ääriviivat tarvitsee kaikki sen arvot; leveys, tyyppi ja väri. box-varjo tarvitsee vain arvon levitä jonka tulisi olla sama kuin ääriviivan leveys ja väri. Sekä ääriviivat että laatikko-varjo yhdessä luovat kaksiväristen viivojen vaikutuksen.

Tämän jälkeen voit säätää laatikon leveyttä tai korkeutta haluamaasi reunakuvaan kulmissa.

Reunojen animointi

Ensimmäistä animaatiotuloksiamme varten lisätään CSS-avainkehyksen animaatioita joukolle bannereita, joiden reunat animoivat jatkuvasti. Animaatiovaikutuksen vuoksi vaihdamme yksinkertaisesti ääriviivan ja laatikon varjon värit.

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

Voit kohdistaa ääriviivan värin käyttämällä ääriviivat-väri longhand-ominaisuus, mutta laatikon varjoihin sinun on annettava kaikki arvot lyhytominaisuudelle nyt.

Kun animaatio on valmis, lisää se ruutuun.

.bannerit ääriviivat: 6px katkoviiva; box-shadow: 0 0 0 6px # EA3556; animaatio: 1s animateBorder ääretön;…

Siirtymät rajoilla

Siirtymisesimerkille lisätään reunoja kuviin ja animoida ne, jotka ovat hoverillä. Voit myös muuttaa eri efektien reunakokoa.

.valokuvat ääriviivat: 20px katkoviiva # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; siirtyminen: kaikki 1s;… .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Nähdään nyt näillä kuvilla, niin näet CSS-katkenneet reunansa kaikissa animaatioissaan.

Ja se on kääre. Voit yrittää korvata katkoviivat rajatuilla, mutta vaikutus ei ehkä ole hyvä. Voit myös muuttaa ääriviivatyyppiä animaation aikana muutamiin tehosteisiin.