Kā animēt skarto robežu ar CSS
Dekorētās robežas var izgreznot jebkuru elementu lapā, bet CSS robežas ir ierobežotas, kad runa ir par stilu. Izstrādātāji bieži nāk klajā ar tādiem risinājumiem kā CSS gradienta robežas, SVG robežas, vairākas robežas un vairāk, lai atdarinātu un uzlabotu kastes robežu un animāciju izskatu.
Šodien mēs aplūkosim vienkāršākus punktus nojauktajām robežām: nojaukto robežu animāciju. Animētā nojaukta robeža tiks veidota, izmantojot tikai izklāsts un kastes ēna, kopš tā laika nav nekādu satraukumu izklāsts tiek atbalstīts no IE8. Tādā veidā lietotājs joprojām varēs redzēt robežas atšķirībā no SVG vai gradienta izmantošanas. Ar to jūs varat izveidot arī divkrāsainus domuzīmes. Paskatīsimies.
Robežu izveide
Vispirms mēs radīsim robežas. Lai to izdarītu, mēs izmantosim pārtrauktu kontūru un kastes ēnu.
.baneri kontūra: 6px svītrains dzeltens; kastes ēna: 0 0 0 6px # EA3556;…
The izklāsts būs vajadzīgas visas tās vērtības; platums, tips un krāsa. The kastes ēna ir nepieciešama tikai vērtība izplatīties tai jābūt vienādai ar kontūras platumu un krāsu. Gan kontūra, gan kastes ēna kopā radīs divu krāsu svītru efektu.
Pēc tam varat pielāgot lodziņa platumu vai augstumu, lai atrastu vēlamo robežu no stūriem.
Animēšana ar robežām
Pirmajam animācijas piemēram mēs pievienosim CSS atslēgas rāmja animācijas banneru kopai ar robežām, kas animē nepārtraukti, pievēršot uzmanību. Animācijas efektam mēs vienkārši nomainīsim kontūras un kastes ēnas krāsas.
@keyframes animateBorder uz outline-color: # EA3556; kastes ēna: 0 0 0 6px dzeltena;
Varat atlasīt kontūras krāsu, izmantojot kontūras krāsa Longhand īpašums, tomēr kastes ēnā jums tagad ir jāsniedz visas vērtības īsfilma īpašumam.
Kad animācija ir gatava, pievienojiet to lodziņam.
.baneri kontūra: 6px svītrains dzeltens; kastes ēna: 0 0 0 6px # EA3556; animācija: 1s animateBorder infinite;…
Pārejas uz robežām
Pārejas piemērā mēs pievienosim robežas attēliem un animēsim tos, kas atrodas lidostā. Varat arī mainīt dažādu efektu robežu.
.fotogrāfijas kontūra: 20px nojaukta # 006DB5; kastes ēna: 0px 0px 0px 20px # 3CFDD3; pāreja: visi 1s;… .photos: hover outline-color: # 3CFDD3; kastes ēna: 0 0 0 20px # 006DB5;
Tagad, novietojiet virs šiem attēliem, lai redzētu savu CSS nojaukto robežu visā savā animētajā godībā.
Un tas ir iesaiņojums. Jūs varat mēģināt nomainīt svītrotas robežas ar punktētām, bet efekts var nebūt labs. Vēl dažus efektus var mainīt arī animācijas laikā.
