Rumah > Artikel > hujung hadapan web > Cipta paparan teks neon menggunakan HTML dan CSS
Cipta paparan teks neon menggunakan HTML dan CSS
- WBOYke hadapan
- 2023-09-03 09:25:06987semak imbas
Kini, mencipta teks neon pada halaman web telah menjadi trend untuk menjadikannya lebih menarik. Kami boleh mencipta teks neon pada halaman web untuk mencipta kesan menarik yang menarik perhatian pengguna kepada maklumat penting yang terkandung dalam halaman web.
Kami boleh menyerlahkannya menggunakan teks neon dengan logo, tajuk, iklan dan banyak lagi. Dalam tutorial ini, kami akan menyesuaikan nilai sifat CSS bayangan teks untuk mencipta teks neon.
Tatabahasa
Pengguna boleh membuat teks neon menggunakan HTML dan CSS dengan mengikut sintaks berikut.
text-shadow: 0 0 1.5rem white;
Kami menggunakan sifat CSS "bayang-teks" dalam sintaks di atas untuk menambah kesan cahaya. Ia mengambil offset mendatar sebagai nilai pertama, ofset menegak sebagai nilai kedua, jejari kabur sebagai nilai ketiga dan warna sebagai nilai keempat.
Kami sentiasa perlu menetapkan offset menegak dan mendatar kepada 0. Untuk menjana kesan neon, kita perlu menggunakan berbilang nilai dengan warna yang berbeza dan jejari kabur untuk sifat CSS bayangan teks.
Contoh 1 (Teks Neon Asas)
Dalam contoh di bawah, kami telah mencipta kesan neon asas untuk teks menggunakan sifat CSS "bayang-teks". Kami menggunakan berbilang nilai dengan jejari dan warna sempadan yang berbeza untuk menjana kesan neon.
Dalam output, pengguna boleh memerhati teks dengan kesan neon.
<html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html><html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html>
Contoh 2 (Teks Neon Pelangi)
Dalam contoh di bawah, kami telah mencipta kesan neon pelangi dalam teks. Di sini kami telah menambah teks di dalam elemen div.
Kami menggunakan sifat CSS "imej latar belakang" dalam CSS untuk menambah kecerunan linear sebagai latar belakang. Kami menggunakan kecerunan linear 4 warna berbeza pada 45 darjah. Selain itu, kami menggunting imej latar belakang dalam bentuk teks menggunakan sifat CSS "-webkit-background-clip".
Selain itu, kami menggunakan sifat CSS "-webkit-text-fill-color" untuk mengisi teks dengan warna lutsinar. Jadi ia akan diisi dengan warna yang sama dengan latar belakang. Selain itu, kami menggunakan sifat CSS animasi dengan bingkai kunci "bingkai kunci pelangi". Dalam bingkai utama, kami menukar jumlah Putaran Hue untuk memutarkan warna di latar belakang.
Dalam output, pengguna boleh melihat kesan pelangi dalam teks.
<html>
<head>
<style>
.rainbow-neon {
font-size: 5rem;
background-image: linear-gradient(45deg, #f3626b, #6181ff, #a25bf2, #ffc100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-keyframe 3s linear infinite;
}
@keyframes rainbow-keyframe {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<h2> Creating the <i> rainbow Neon text </i> using the CSS </h2>
<div class="rainbow-neon"> It's raining actually. </div>
</body>
</html>
Contoh 3 (Teks Neon Berkelip)
Dalam contoh di bawah kami telah mencipta teks neon berkelip. Di sini, kami menggunakan sifat CSS "bayang-teks" untuk menambah kesan neon pada teks. Selain itu, kami menggunakan atribut "animasi" untuk menambah animasi berkelip. Dalam bingkai utama "berkedip", kami menukar nilai sifat "bayang-teks".
Dalam output, kita dapat melihat teks berkelip dengan kesan cahaya.
<html>
<head>
<style>
.flicker {
font-size: 4rem;
color: blue;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
color: #fff;
animation: flicker 0.5s linear infinite;
}
@keyframes flicker {
0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%
{ text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
1%, 6%, 11%, 16%, 21%, 26%, 31%, 36%, 41%, 46%, 51%, 56%, 61%, 66%, 71%, 76%, 81%, 86%, 91%, 96%
{
text-shadow: none;
}
}
</style>
</head>
<body>
<h2> Creating the <i> flickering Neon text </i> using the CSS. </h2>
<div class = "flicker"> This text is flickering. </div>
</body>
</html>
Contoh 4 (Teks Neon Kecerunan)
Dalam contoh di bawah, kami menambah kecerunan pada teks. Kami menggunakan kecerunan pada teks menggunakan sifat "imej latar belakang".
Dalam output, pengguna boleh memerhati warna teks dengan kecerunan. Selain itu, pengguna boleh menukar warna kecerunan dengan menghantar nilai warna yang berbeza kepada hujah fungsi Linear-gradient().
<html>
<head>
<style>
.gradient {
font-size: 3rem;
background-image: linear-gradient(45deg, #00dbde, #fc00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2> Creating the <i> Gradient Neon text </i> using the CSS. </h2>
<div class = "gradient"> Check gradient in Neon text </div>
</body>
</html>
Pengguna belajar membuat teks neon menggunakan HTML dan CSS sahaja. Kami belajar mencipta teks neon lanjutan daripada teks neon asas dengan animasi seperti kesan pelangi dan kesan berkelip.
Atas ialah kandungan terperinci Cipta paparan teks neon menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!