Kuidas animeerida kriipsutatud piiri CSS-iga
Kaunistatud piirid võivad kaunistada ühtegi elementi lehel, kuid stiiliga seoses on CSS piirid piiratud. Arendajad pakuvad tihti lahendusi, nagu CSS-gradiendi piirid, SVG piirid, mitmed piirid ja rohkem, et jäljendada ja uuendada kasti piiride ja animatsioonide välimust.
Täna vaatleme lihtsamalt katkendlike piiride häkkimist: katkendlik piiride animatsioon. Animeeritud katkendjoon luuakse ainult kasutades ülevaade ja kast-vari, sellest ei tule muret, sest ülevaade on toetatud alates IE8-st. Nii on kasutajal võimalik näha piire, erinevalt SVG või gradienti kasutamisest. Selle abil saate luua ka kahevärvilisi kriike. Vaatame.
Piiride loomine
Kõigepealt loome piirid. Selleks kasutame katkendlikku kontuuri ja kasti varju.
.bännerid kontuur: 6px katkendlik kollane; box-shadow: 0 0 0 6px # EA3556;…
The ülevaade vajab kõiki oma väärtusi; laius, tüüp ja värv. The kast-vari vajab ainult väärtust levinud mis peaks olema sama nagu kontuuri laius ja värv. Nii kontuur kui ka kasti vari koos tekitavad kahevärviliste kriipsude mõju.
Seejärel saate reguleerida kasti laiust või kõrgust soovitud piiride vaatamiseks nurkades.
Piiride animeerimine
Meie esimese animatsiooninäite puhul lisame CSS-i võtmekeha animatsioone bännerite kogumile, mille piirid animeerivad pidevalt, pöörates tähelepanu. Animatsiooniefekti jaoks vahetame lihtsalt kontori ja kasti varju värvid.
@keyframes animateBorder kuni outline-color: # EA3556; box-shadow: 0 0 0 6px kollane;
Te saate suunata kontuuri värvi kasutades kontuurvärv longhand vara, aga kasti varjus peate andma kõik väärtused stenogrammile.
Kui animatsioon on valmis, lisage see kasti.
.bännerid kontuur: 6px katkendlik kollane; box-shadow: 0 0 0 6px # EA3556; animatsioon: 1s animateBorder infinite;…
Üleminekud piiridel
Ülemineku näite jaoks lisame pilte pilte ja animeerime neid, kes on hover. Erinevaid efekte saab muuta ka piiride suuruseks.
.fotod outline: 20px katkendlik # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; üleminek: kõik 1s;… .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5;
Nüüd liiguta nende piltide kohal, et näha oma CSS-i katkendlikke piire kogu oma animeeritud aus.
Ja see on mähis. Võid proovida kriipsutatud piire asendada punktiiridega, kuid efekt ei pruugi olla hea. Mõne muu efekti jaoks saate animatsiooni ajal muuta ka kontuuri tüüpi.
