Cara mencipta kesan sorotan menggunakan CSS (kod dilampirkan)

Bagaimana untuk mencipta kesan sorotan menggunakan CSS? Artikel berikut akan menganalisis prinsip pelaksanaan dan berkongsi kod pelaksanaan kesan lampu sorot CSS. Saya harap ia akan membantu semua orang!

Prinsip pelaksanaan kesan lampu sorot CSS adalah sangat mudah:

• Bertindih sepenuhnya kedua-dua teks, lapisan dalam berwarna kelabu gelap dan lapisan luar ialah warna Gradien. [Pembelajaran yang disyorkan: Tutorial video CSS]
• Sapukan topeng bulat pada teks luar.
• Tambah CSS Animation pada penghujung.

Sokongan Teknikal

Sifat CSS yang dirujuk ialah:

• linear-gradient()
• imej latar belakang
• klip latar belakang
• laluan klip

pelaksanaan

Untuk memastikan struktur HTML mudah, elemen kelas pseudo akan digunakan kemudian.

Kod HTML adalah seperti berikut:

<h1 data-text="我想藏在罐头里!!!">我想藏在罐头里</h1>

Nota: attr() secara teorinya boleh digunakan untuk semua sifat CSS tetapi pada masa ini hanya menyokong elemen pseudo content atribut, atribut lain dan ciri lanjutan sedang dalam percubaan

Nota Penterjemah: Jika anda mendapati bahawa penggunaan lanjutan attr() dalam jadual keserasian penyemak imbas masih tidak bagus Jika anda sokongan, kebanyakan kandungan artikel ini hanyalah bercakap di atas kertas

PetikanDokumen MDN

Kod CSS adalah seperti berikut:

*{
    margin: 0;
    padding: 0;
}

:root{
  --ellipse: 6.25rem;
}

html, body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #222;
}
h1{
    font-size: 4rem;
    color: #333;
    width: 37.5rem;
    position: relative;
}
h1::after{
    /* attr(attribute_name) */
    content:attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: pink;
    clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%);
    animation: move 5s infinite;
}
@keyframes move{
    0%, 100%{
        clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%);
    }
    50%{
        clip-path: ellipse(var(--ellipse) var(--ellipse) at 100% 50%);
    }
}

Kesannya adalah seperti berikut :

Kini kesan lampu sorot dinamik selesai.

Tetapi masih ada masalah, saya tertanya-tanya jika rakan-rakan saya yang penuh perhatian telah menyedarinya , dan akhirnya letakkan 彩色 Tukar kepada telus, jadi kita perlu mengubah suai kod. color

Tambah kod

dan h1:after dalam background-image: background-clip

h1::after{
    /* 别忘记修改color为透明 */
    color: transparent;
    background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d);
    background-clip: text;
    /* 因为background-clip是预览阶段的css属性，要加上一个前缀版本 */
    -webkit-background-clip: text;
}

Lihat keputusan akhir:

Kod sumber demo ada di sini Pautan CodePen:

https://codepen.io/jackbrens/pen/MWrGNed

Ringkasan

di atas adalah semua kandungan yang dikongsi kali ini~~

Jika anda rasa artikel itu ditulis dengan baik dan telah memberi inspirasi kepada anda, sila jangan teragak-agak untuk mengklik

dan 赞 dan tinggalkan komen anda di 关注 Pendapat yang berharga~~评论区

(Belajar perkongsian video:

bahagian hadapan web)

Atas ialah kandungan terperinci Cara mencipta kesan sorotan menggunakan CSS (kod dilampirkan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!