8 kod kesan CSS praktikal yang patut dikumpulkan (kongsi)

Artikel ini berkongsi 8 kod kesan CSS yang menarik yang mesti diketahui oleh pembangun CSS. Mari kita lihat.

1 Tukar warna kursor kotak input

MDN: Atribut caret-color digunakan untuk mentakrifkan warna kursor sisipan (karet sisipan yang disebut di sini ialah kursor sisipan yang disebutkan di sini ialah yang berada di kawasan halaman web yang boleh diedit, digunakan untuk menunjukkan di mana input pengguna akan dimasukkan perkara yang berkelip yang kelihatan seperti bar menegak . (Belajar perkongsian video: |tutorial video css)

Sebagai contoh, kami menetapkan kursor kepada biru

input{

caret-color:blue;
}

2 Baris kod melarang pengguna daripada memilih teks

  user-select: none;

3 Kesan pemilihan kandungan

Di sini tetapkan warna teks yang dipilih kepada hijau

.div::selection {
  background-color: green;
  color: #fff;
}

4 Tiga baris kod yang paling berguna untuk memusatkan

display: flex;
          align-items: center;
          justify-content: center;

Contoh:

 .father{
      width: 200px;
      height: 200px;
      border: solid #000 2px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .child{
      width: 50px;
      height: 50px;
      border: solid red 2px;
  }

5 Penatalan lancar

scroll-behavior: smooth;

6 elemen boleh ubah saiz pengguna

 resize: both;

Nota:

Melainkan atribut resize ditetapkan kepada nilai lain daripada overflow Jika tidak, tiada apa yang dilakukan dan boleh dilihat ialah nilai lalai untuk kebanyakan elemen. visible

 .father{
          width: 200px;
          height: 200px;
          border: solid #000 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          resize: both;
          overflow: auto;

      }

7 Gambar sebagai kursor

cursor: url(), auto;

8 Kesan mesin taip

.container {
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .typing {
        width: 220px;
        animation: typing 2s steps(8), blink 0.5s step-end infinite alternate;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
      }

      @keyframes typing {
        from {
          width: 0;
        }
      }

      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }

<div class="container">
      <div class="typing">我是用打字机效果</div>
</div>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan! !

Atas ialah kandungan terperinci 8 kod kesan CSS praktikal yang patut dikumpulkan (kongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!