Cara Menganimasikan Garis Batas Dash dengan CSS
Perbatasan yang didekorasi dapat menghiasi elemen apa pun di laman, namun sempadan CSS terbatas saat menyangkut gaya. Pengembang sering datang dengan solusi seperti CSS-gradient borders, SVG borders, multiple borders dan lainnya untuk meniru dan meningkatkan tampilan kotak batas dan animasinya.
Hari ini kita akan melihat hack sederhana untuk perbatasan yang putus-putus: animasi perbatasan putus-putus. Garis batas putus-putus animasi hanya akan dibuat menggunakan garis besar dan bayangan kotak, tidak meninggalkan keributan tentang fallback, sejak garis besar didukung dari IE8 dan seterusnya. Dengan cara itu pengguna masih dapat melihat perbatasan tidak seperti ketika SVG atau gradien digunakan. Dengan ini, Anda juga dapat membuat tanda garis bicolored. Mari lihat.
Menciptakan Perbatasan
Kami pertama-tama akan membuat perbatasan. Untuk ini, kami akan menggunakan garis putus-putus dan bayangan kotak.
.spanduk garis besar: 6px putus-putus kuning; box-shadow: 0 0 0 6px # EA3556;…
Itu garis besar akan membutuhkan semua nilainya; lebar, jenis dan warna. Itu bayangan kotak hanya membutuhkan nilai untuk penyebaran yang harus sama dengan lebar garis dan warnanya. Garis dan bayangan kotak bersama-sama akan menciptakan efek tanda hubung dua warna.
Anda kemudian dapat menyesuaikan lebar atau tinggi kotak untuk tampilan tepi yang Anda inginkan di sudut.
Animasi Perbatasan
Untuk contoh animasi pertama kami, kami akan menambahkan animasi keyframe CSS ke satu set spanduk dengan batas yang terus-menerus beranimasi, mendapatkan perhatian. Untuk efek animasi kami hanya akan menukar warna outline dan bayangan kotak.
@keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 6px yellow;
Anda dapat menargetkan warna garis menggunakan garis-warna properti lama, namun untuk bayangan kotak Anda harus memberikan semua nilai ke properti singkatan untuk saat ini.
Setelah animasi siap, tambahkan ke kotak.
.spanduk garis besar: 6px putus-putus kuning; box-shadow: 0 0 0 6px # EA3556; animasi: 1s animateBorder infinite;…
Transisi Di Perbatasan
Sebagai contoh transisi, kami akan menambahkan batas pada gambar dan menganimasikannya pada hover. Anda juga dapat mengubah ukuran batas untuk efek yang berbeda.
.foto garis besar: 20px putus-putus # 006DB5; kotak-bayangan: 0px 0px 0px 20px # 3CFDD3; transisi: semua 1s; ... .foto: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5;
Sekarang, arahkan kursor ke gambar-gambar ini untuk melihat batas putus-putus CSS Anda dalam semua kemuliaan animasinya.
Dan, itu bungkus. Anda dapat mencoba mengganti garis putus-putus dengan garis putus-putus, tetapi efeknya mungkin tidak sama baiknya. Anda juga dapat mengubah tipe garis besar selama animasi untuk beberapa efek lagi.
