Atur dan kongsi 5 CSS tulen untuk mencapai kesan teks yang menarik-Soal Jawab bahagian hadapan-php.cn

Artikel ini membawakan anda 5 kesan teks yang sangat hebat ini semuanya dilaksanakan menggunakan CSS. Saya harap ia akan membantu semua orang.

Atur dan kongsi 5 CSS tulen untuk mencapai kesan teks yang menarik

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%);

Salin selepas log masuk

Tetapkan atribut webkit-background-clip untuk menggunakan teks sebagai kawasan pemangkasan untuk memangkas ke luar

-webkit-background-clip: text;
        background-clip: text;

Salin selepas log masuk

Pass -webkit- Sifat animasi boleh dianimasikan untuk mencapai kesan di atas

-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

Salin selepas log masuk

@-webkit-keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}
@keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}

Salin selepas log masuk

Rujukan Gaya

<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">前端实验室</p>
    </body>
</html>

Salin selepas log masuk

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%;
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

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;
    }
}

Salin selepas log masuk

<html>
    <head>
        <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
    </head>
    <body>
        <div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
    </body>
</html>

Salin selepas log masuk

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;
}

Salin selepas log masuk

@-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;
    }
}

Salin selepas log masuk

<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

Salin selepas log masuk

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;
}

Salin selepas log masuk

/* 打印效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 21em;
    }
}
/* 光标 */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

Salin selepas log masuk

<html>
   <head>
   <link rel="stylesheet" href="./css/typing-style.css">
   </head>
   <body>
   <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
</html>

Salin selepas log masuk

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>

Salin selepas log masuk

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);
    }
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

.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;
}

Salin selepas log masuk

.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;
}

Salin selepas log masuk

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!