Cipta kad mewah dengan jidar kecerunan animasi

Dalam tutorial ini, saya akan membimbing anda mencipta kesan sempadan kecerunan animasi menggunakan sifat tersuai CSS, yang boleh menambah rupa yang dinamik dan menarik perhatian pada komponen UI anda. Pada akhirnya, anda akan mempunyai kad ringkas dengan jidar kecerunan animasi, menggunakan @property tersuai css.

Jika anda tidak biasa dengan css custom @property baca blog ini dahulu.

Struktur kad asas

Kami akan menggunakan react untuk tutorial ini, kad asas akan kelihatan seperti ini

import "./styles.css";

const CardAnimatedBorder = () => {
  return (
    <div className="container">
      <div className="card">This is a card with animated gradient border</div>
    </div>
  );
};

export default CardAnimatedBorder;

Menambah gaya asas pada kad

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

Mencipta sempadan mudah

Sebelum mencipta jidar animasi kecerunan mari lihat cara membuat jidar mudah. Kami tidak akan menggunakan sifat sempadan css tetapi sebaliknya menggunakan elemen pseudo ::before dan ::after untuk kad. Satu lagi sifat penting di sini ialah inset yang membolehkan kita meletakkan elemen pseudo di dalam kad. Indeks z ialah -1 kerana kami mahu sempadan berada di bawah kandungan kad.

.card::after,
.card::before {
  content: "";
  position: absolute;
  background: red;
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
}

Kad kami kini kelihatan seperti ini

Menambah sifat tersuai --angle

Kami akan menambah sifat tersuai untuk menjejak sudut kecerunan. Kami akan menggunakan kecerunan kon.
Tambahkan sifat tersuai seperti ini

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

dan buat perubahan berikut pada css

• Gantikan latar belakang dengan imej latar belakang untuk memaparkan kecerunan.
• Tambahkan putaran animasi untuk sudut sifat tersuai.
• Kecerunan kon mempunyai sudut sebagai hujah pertama dan kami akan mengubahnya untuk menghidupkan.
• Tambahkan kabur dan kelegapan untuk kesan bercahaya.

Css anda sepatutnya kelihatan seperti ini

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    blue,
    red
  );
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
  animation: 2s spin linear infinite;
}

.card::before {
  filter: blur(1rem);
  opacity: 0.7;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

Dan akhirnya kami mempunyai kad dengan jidar kecerunan animasi.

Demo

Klik di sini

Baca lagi

• Dokumen MDN @property

Catatan asal

Atas ialah kandungan terperinci Cipta kad mewah dengan jidar kecerunan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!