Rumah > Artikel > hujung hadapan web > 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:
CSS Animation
pada penghujung. Sifat CSS yang dirujuk ialah:
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 pseudocontent
atribut, atribut lain dan ciri lanjutan sedang dalam percubaanNota 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
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/MWrGNedRingkasan 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~~评论区
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!