Artikel ini membawakan anda 5 kesan teks yang sangat hebat ini semuanya dilaksanakan menggunakan CSS. Saya harap ia akan membantu semua orang.
CSS ialah bahasa yang sangat istimewa. Anda rasa CSS hanya boleh digunakan untuk mengawal struktur dan gaya halaman web, tetapi selagi anda mempunyai imaginasi yang kaya, anda boleh. mencipta Kemungkinan tidak berkesudahan.
1 Kesan teks kecerunan
Kesan ini terutamanya menggunakan klip latar belakang: teks dengan warna untuk mencapai kesan teks kecerunan Pertama, fahami maksud klip latar belakang: teks;: gunakan teks dalam kotak sebagai kawasan pemangkasan untuk memangkas ke luar, dan kawasan di luar. teks akan dipangkas.
Tetapkan latar belakang kecerunan untuk bekas teks
background: linear-gradient(90deg, black 0%, white 50%, black 100%);
Tetapkan atribut webkit-background-clip untuk menggunakan teks sebagai kawasan pemangkasan untuk memangkas ke luar
-webkit-background-clip: text; background-clip: text;
Pass -webkit- Sifat animasi boleh dianimasikan untuk mencapai kesan di atas
-webkit-animation: shining 3s linear infinite; animation: shining 3s linear infinite;
@-webkit-keyframes shining { from { background-position: -500%; } to { background-position: 500%; } } @keyframes shining { from { background-position: -500%; } to { background-position: 500%; } }
Rujukan Gaya
<html> <link rel="stylesheet" href="./css/neno-text-style.css"> <body> <p class="neon">前端实验室</p> </body> </html>
2. Kesan teks pelangi (marquee)
.text { letter-spacing: 0.2rem; font-size: 1.5rem; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; }
Kesan ini juga dicapai menggunakan background-clip:text dan atribut kecerunan linear Teks pelangi direalisasikan dengan menetapkan nilai warna kawasan.
Teks pelangi dinamik perlu menetapkan atribut -webkit-animasi
-webkit-animation: maskedAnimation 4s infinite linear; @keyframes maskedAnimation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }
Gaya CSS
.rainbow { letter-spacing: 0.2rem; font-size: 1.2rem; text-transform: uppercase; } .rainbow span { animation: rainbow 50s alternate infinite forwards; } @keyframes rainbow { 0% { color: #efc68f; } ... 100% { color: #8fefed; } }
<html> <head> <link rel="stylesheet" href="./css/rainbow-color-text-style.css"> </head> <body> <div class="text">【前端实验室】分享前端最新、最实用前端技术</div> </body> </html>
3 kesan teks
Kesan ini dicapai terutamanya menggunakan atribut bayangan teks. Sifat bayang teks menambah satu atau lebih bayang pada teks. Sifat ini ialah senarai warna yang dipisahkan koma, setiap lorek ditentukan dengan dua atau tiga nilai panjang dan nilai warna pilihan.
.neon { color: #cce7f8; font-size: 2.5rem; -webkit-animation: shining 0.5s alternate infinite; animation: shining 0.5s alternate infinite; }
@-webkit-keyframes shining { from { text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue; } to { text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue; } }
<html> <head> <link rel="stylesheet" href="./css/neno-text-style.css"> </head> <body> <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p> </body> </html>
4. Kesan mesin taip
Kesan ini terutamanya Ini dicapai dengan menukar lebar bekas.
.typing { color: white; font-size: 2em; width: 21em; height: 1.5em; border-right: 1px solid transparent; animation: typing 2s steps(42, end), blink-caret .75s step-end infinite; font-family: Consolas, Monaco; word-break: break-all; overflow: hidden; }
/* 打印效果 */ @keyframes typing { from { width: 0; } to { width: 21em; } } /* 光标 */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: currentColor; } }
<html> <head> <link rel="stylesheet" href="./css/typing-style.css"> </head> <body> <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div> </html>
Atribut white-space:nowrap adalah terutamanya untuk memastikan satu baris dipaparkan Memandangkan paparan huruf Inggeris, atribut ini dialih keluar untuk memastikan tiada ketaksinambungan watak.
word-break:break-all membolehkan aksara Inggeris dipersembahkan satu demi satu.
Fungsi langkah dalam atribut animasi membolehkan animasi dilaksanakan secara berselang-seli dan bukannya berterusan.
sintaks langkah() bermaksud: langkah(nombor, kedudukan), di mana kata kunci nombor menunjukkan bilangan segmen animasi dibahagikan kepada kata kunci kedudukan menunjukkan sama ada animasi berterusan dari awal atau akhir masa tempoh, dan menyokong mula dan Dua kata kunci berakhir mempunyai maksud berikut:
mula: bermaksud bermula terus
akhir: bermaksud berhenti secara tiba-tiba, iaitu nilai lalai
Kesan kursor dicapai melalui simulasi bayang-kotak. Kesan mesin taip mudah boleh dicapai melalui atribut di atas~
5 Kesan teks gaya gangguan
Kesan animasi agak kompleks, terutamanya menggunakan elemen pseudo CSS, atribut tersuai elemen, atribut topeng, animasi animasi, dsb.
<div class="text" data-text="欢迎关注微信公众号【前端实验室】"> 欢迎关注微信公众号【前端实验室】 </div>
Atribut tersuai digunakan terutamanya di sini, data- ditambah nama atribut tersuai, dan teks yang akan dipaparkan diperuntukkan untuk elemen pseudo untuk mendapatkan teks yang sepadan.
@keyframes animation-before{ 0% { clip-path: inset(0 0 0 0); } ... 100% { clip-path: inset(.62em 0 .29em 0); } } @keyframes animation-after{ 0% { clip-path: inset(0 0 0 0); } ... 100% { clip-path: inset(.29em 0 .62em 0); } }
Dua bingkai utama ditetapkan di sini, iaitu animasi-sebelum dan animasi-selepas Yang pertama disediakan untuk elemen pseudo sebelum, dan yang kedua digunakan untuk elemen pseudo selepas.
Atribut clip-path ialah topeng atribut baharu CSS3 Nilai inset() menunjukkan bahawa bentuk topeng ialah segi empat tepat Selepas menentukan kawasan kesan topeng, tetapkan bingkai Animasi -by-frame melalui @keyframes Buat kawasan topeng perubahan dalam arah menegak untuk mencapai kesan kegelisahan atas dan bawah.
.text{ display: inline-block; font-size: 3.5em; font-weight: 600; padding: 0 4px; color: white; position: relative; }
.text::before{ content: attr(data-text); position: absolute; left: -2px; width: 100%; background: black; text-shadow:2px 0 red; animation: animation-before 3s infinite linear alternate-reverse; }
.text::after{ content: attr(data-text); position: absolute; left: 2px; width: 100%; background: black; text-shadow: -2px 0 blue; animation: animation-after 3s infinite linear alternate-reverse; }
Akhir sekali, kami menetapkan dua elemen pseudo sebelum dan selepas, letakkannya pada kedudukan yang sama dengan elemen induk, dan kemudian gerakkan sedikit jarak ke kiri dan kanan masing-masing ke cipta Kesan tidak sejajar, dan kemudian tetapkan warna latar belakang kepada warna yang sama dengan warna latar belakang elemen induk untuk menyekat elemen induk
Dengan cara ini, animasi paparan teks gaya gangguan yang sempurna boleh dicapai~
Kesan khas yang hebat boleh menambah gaya yang berbeza pada halaman web kami Kod sumber kesan yang dilaksanakan dalam artikel ini telah dimuat naik ke Github Anda boleh mendapatkannya dengan membalas kesan teks aaa di latar belakang akaun rasmi Datang dan belajar bersama kami Bar!
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Atur dan kongsi 5 CSS tulen untuk mencapai kesan teks yang menarik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!