Rumah hujung hadapan web Tutorial H5 段落每行渐变色文本效果

段落每行渐变色文本效果

Mar 20, 2018 pm 01:55 PM
Perubahan warna Kesan teks

这次给大家带来段落每行渐变色文本效果,段落每行渐变色文本效果的注意事项有哪些,下面就是实战案例,一起来看一下。

今天小编在Codepen上看到一个CSS写的效果。一个段落的每行文本是渐变效果。对于单行文本或单个词实现渐变填充效果并不是什么奇怪的事情,不过对于一个段落的每一行实现一个文本渐变填充的效果。估计还是会令很多人感到好奇。如果你是其中好奇的一员,请继续往下阅读,一探其中之究竟!

目标效果

今天的目标效果是实现下面这样的效果,或者说了解这种效果制作的小技巧:

640?wx_fmt=jpg&wxfrom=5&wx_lazy=1

看到上面的效果,我想很多人首先会想到的就是background-clip:text、color:transparent和linear-gradient来完成。那么事实是这样吗?

如何完成一个段落的每行文本渐变效果

了解CSS的同学都清楚,使用:

background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;
Salin selepas log masuk

就可以轻易的实现一个文本的渐变填充效果。比如下面这个示例:

640?wx_fmt=jpg

来做个小实验,如果文本不是一个词或单行而是整个段落,效果会是如何?

640?wx_fmt=jpg

效果似乎也是完美的。如果把渐变效果参数换一换,渐变效果是一个斜角:

background-image: linear-gradient(135deg, deeppink, dodgerblue);
Salin selepas log masuk

看看两者的效果:

640?wx_fmt=jpg

仔细一看,两个效果还是有差异的。先来看看同一个大小容器(本示例中的p元素,其大小是765px * 165px),对于两种不同的渐变效果,先来看to right的填充效果:

640?wx_fmt=jpg

再来看135deg的填充效果:

640?wx_fmt=jpg

到这里了,你或许就知道前面的示例有何不同?而且也知道其中的原因是什么?如果我们想要各种渐变对于段落的每行填充效果都相同,应该怎么实现?在实现之前,先简单的总结一下:

在linear-gradient中使用to right或者to left,不管是单个词、单行文本或者多行文本,得到的文本填充效果都将一致。但对于其他渐变的角度参数,那么多行文本填充中的每行效果就将有差异。

回到正题?怎么实现多行而且不管任何填充角度都有相同效果?实现这个效果有一个关键属性:box-decoration-break。简单的说一下,box-decoration-break属性具有两个属性值:slice和clone,其对应的效果如下:

用于一个段落中,其效果如下:

640?wx_fmt=jpg

是不是离我们的目标越来越近了。那么把这个属性box-decoration-break:clone用于我们的示例:

background-image: linear-gradient(135deg, deeppink, dodgerblue);
background-clip: text;
-webkit-background-clip: text;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: transparent;
Salin selepas log masuk

效果如下:

640?wx_fmt=jpg

咱们来验证一下是不是符合我们预期想要的效果:

640?wx_fmt=gif

小技巧:box-decoration-break运用于行内元素,并且配上相应的line-height,让行与行之间有一定的间距。

回过头来,咱们看看,使用box-decoration-break是在行内元素和块元素之间的区别:

640?wx_fmt=jpg

是不是很完美。如果喜欢自己动手试试。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

H5中APP监听返回事件处理

前端技术实现文本文字纹理叠加

Atas ialah kandungan terperinci 段落每行渐变色文本效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih Apr 03, 2024 am 08:13 AM

Anda mungkin menghadapi masalah garis hijau yang muncul pada skrin telefon pintar anda Walaupun anda tidak pernah melihatnya, anda mesti melihat gambar berkaitan di Internet. Jadi, pernahkah anda menghadapi situasi di mana skrin jam tangan pintar bertukar menjadi putih? Pada 2 April, CNMO mendapat tahu daripada media asing bahawa seorang pengguna Reddit berkongsi gambar di platform sosial, menunjukkan skrin jam tangan pintar siri Samsung Watch bertukar menjadi putih. Pengguna menulis: "Saya sedang mengecas apabila saya pergi, dan apabila saya kembali, ia adalah seperti ini. Saya cuba untuk memulakan semula, tetapi skrin masih seperti ini semasa proses mulakan semula skrin jam tangan pintar Samsung Watch." Pengguna Reddit tidak menyatakan model khusus. Walau bagaimanapun, jika dilihat dari gambar, ia sepatutnya Samsung Watch5. Sebelum ini, seorang lagi pengguna Reddit turut melaporkan

Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara Mar 28, 2024 am 11:11 AM

Bercakap tentang ASSASSIN, saya percaya pemain pasti akan memikirkan pembunuh utama dalam "Assassin's Creed". casis domestik/bekalan kuasa/penyejukan yang terkenal Siri ASSASSIN radiator penyejuk udara utama daripada jenama perkakas DeepCool bertepatan antara satu sama lain. Baru-baru ini, produk terbaharu siri ini, ASSASSIN4S, telah dilancarkan "Assassin in Suit, Advanced" membawakan pengalaman penyejukan udara baharu kepada pemain maju. Penampilannya penuh dengan perincian. Radiator Assassin 4S menggunakan struktur menara berkembar + reka bentuk terbina dalam kipas tunggal warna untuk memenuhi warna yang berbeza

Cara mencari teks merentas semua tab dalam Chrome dan Edge Cara mencari teks merentas semua tab dalam Chrome dan Edge Feb 19, 2024 am 11:30 AM

Tutorial ini menunjukkan kepada anda cara mencari teks atau frasa tertentu pada semua tab terbuka dalam Chrome atau Edge pada Windows. Adakah terdapat cara untuk melakukan carian teks pada semua tab terbuka dalam Chrome? Ya, anda boleh menggunakan sambungan web luaran percuma dalam Chrome untuk melakukan carian teks pada semua tab terbuka tanpa perlu menukar tab secara manual. Sesetengah sambungan seperti TabSearch dan Ctrl-FPlus boleh membantu anda mencapai ini dengan mudah. Bagaimana untuk mencari teks merentas semua tab dalam Google Chrome? Ctrl-FPlus ialah sambungan percuma yang memudahkan pengguna mencari perkataan, frasa atau teks tertentu merentas semua tab tetingkap penyemak imbas mereka. Pengembangan ini

Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos Apr 17, 2024 pm 05:07 PM

Dengan ketibaan musim bunga, segala-galanya pulih dan segala-galanya penuh dengan daya hidup dan kecergasan. Dalam musim yang indah ini, bagaimana untuk menambah sentuhan warna pada kehidupan rumah anda? Projektor Haqu H2, dengan reka bentuk yang indah dan keberkesanan kos yang tinggi, telah menjadi keindahan yang sangat diperlukan pada musim bunga ini. Projektor H2 ini padat tetapi bergaya. Sama ada diletakkan di atas kabinet TV di ruang tamu atau di sebelah meja sisi katil di dalam bilik tidur, ia boleh menjadi landskap yang indah. Badannya diperbuat daripada tekstur matte putih susu Reka bentuk ini bukan sahaja menjadikan projektor kelihatan lebih maju, tetapi juga meningkatkan keselesaan sentuhan. Bahan bertekstur kulit kuning air menambah sentuhan kemesraan dan keanggunan pada penampilan keseluruhan. Gabungan warna dan bahan ini bukan sahaja menepati trend estetik rumah moden, tetapi juga boleh diintegrasikan ke dalam

Apakah pintasan papan kekunci untuk bertukar kepada mod hitam putih dalam win10? Apakah pintasan papan kekunci untuk bertukar kepada mod hitam putih dalam win10? Jan 10, 2024 pm 01:26 PM

Sistem win10 yang dilancarkan oleh Microsoft mempunyai banyak ciri baharu berbanding versi sebelumnya Contohnya, anda boleh menggunakan penapis warna iaitu pintasan penapis warna untuk menukar paparan keseluruhan win10 kepada hitam putih. Sesetengah rakan mungkin tidak tahu bagaimana untuk menyediakan kesan ini. Jadi izinkan saya memberitahu anda sekarang. Semoga membantu anda~ Apakah penyelesaian kepada kekunci pintasan untuk menukar win10 kepada hitam putih 1. Anda boleh menggunakan pintasan ++ untuk menghidupkan atau mematikan penapis warna penapis, anda boleh klik kanan logo mula pada bar tugas Pilih pilihan 3 dalam menu timbul Pilih pilihan 4 dalam antara muka yang dibuka menggunakan bar mudah di sebelah kiri halaman yang dibuka antara muka penapis warna di sebelah kanan halaman yang dibuka kita akan melihat a

Cuba nada dering dan nada teks baharu: Alami makluman bunyi terkini pada iPhone dalam iOS 17 Cuba nada dering dan nada teks baharu: Alami makluman bunyi terkini pada iPhone dalam iOS 17 Oct 12, 2023 pm 11:41 PM

Dalam iOS 17, Apple telah merombak keseluruhan pilihan nada dering dan nada teksnya, menawarkan lebih daripada 20 bunyi baharu yang boleh digunakan untuk panggilan, mesej teks, penggera dan banyak lagi. Begini cara untuk melihat mereka. Banyak nada dering baharu lebih panjang dan berbunyi lebih moden daripada nada dering lama. Ia termasuk arpeggio, patah, kanopi, kabin, kicauan, subuh, berlepas, dolop, perjalanan, cerek, merkuri, galaksi, quad, jejari, pemulung, anak benih, tempat berteduh, taburan, langkah, masa cerita , goda, senget, terbentang dan lembah. Refleksi kekal sebagai pilihan nada dering lalai. Terdapat juga 10+ nada teks baharu yang tersedia untuk mesej teks masuk, mel suara, makluman mel masuk, makluman peringatan dan banyak lagi. Untuk mengakses nada dering dan nada teks baharu, pertama sekali, pastikan iPhone anda

Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik Mar 06, 2024 pm 04:40 PM

Dalam era perkembangan teknologi yang pesat sekarang, komputer riba telah menjadi alat yang sangat diperlukan dan penting dalam kehidupan dan pekerjaan harian manusia. Bagi pemain yang mempunyai keperluan prestasi tinggi, komputer riba dengan konfigurasi berkuasa dan prestasi cemerlang boleh memenuhi keperluan teras tegar mereka. Dengan prestasi cemerlang dan reka bentuk yang menakjubkan, komputer notebook Colorful Hidden Star P15 telah menjadi peneraju masa depan dan boleh dipanggil model buku nota tegar. Colorful Hidden Star P1524 dilengkapi dengan pemproses Intel Core i7 generasi ke-13 dan GPU RTX4060Laptop Ia menggunakan gaya reka bentuk kapal angkasa yang lebih bergaya dan mempunyai prestasi yang cemerlang dalam butiran. Mari kita lihat dahulu ciri-ciri buku nota ini. Supreme dilengkapi dengan pemprosesan Intel Core i7-13620H

Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat Mar 28, 2024 pm 03:20 PM

Dengan saiznya yang padat, platform ITX telah menarik ramai pemain yang mengejar keindahan terunggul dan unik Dengan peningkatan proses pembuatan dan kemajuan teknologi, kedua-dua kad grafik siri Core dan RTX40 generasi ke-14 Intel boleh menggunakan kekuatan mereka pada platform ITX, dan. pemain juga Terdapat keperluan yang lebih tinggi untuk bekalan kuasa SFX. Penggemar permainan Huntkey telah melancarkan bekalan kuasa siri MX baharu Dalam platform ITX yang memenuhi keperluan berprestasi tinggi, bekalan kuasa modul penuh MX750P mempunyai kuasa penarafan sehingga 750W dan telah lulus pensijilan tahap platinum 80PLUS. Di bawah kami bawakan penilaian bekalan kuasa ini. Bekalan kuasa modul penuh Huntkey MX750P menggunakan konsep reka bentuk yang ringkas dan bergaya Terdapat dua model hitam dan putih untuk dipilih oleh pemain kedua-duanya menggunakan rawatan permukaan matte dan mempunyai tekstur yang baik dengan fon perak kelabu dan merah.

See all articles