實(shí)用CSS效果代碼有哪些

本篇內(nèi)容主要講解“實(shí)用CSS效果代碼有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“實(shí)用CSS效果代碼有哪些”吧!

1 更改輸入框的光標(biāo)顏色

MDN:caret-color 屬性用來定義插入光標(biāo)（caret）的顏色，這里說的插入光標(biāo)，就是那個(gè)在網(wǎng)頁的可編輯器區(qū)域內(nèi)，用來指示用戶的輸入具體會插入到哪里的那個(gè)一閃一閃的形似豎杠 | 的東西。

例如我們將光標(biāo)設(shè)置為藍(lán)色

input{

caret-color:blue;
}

2 一行代碼禁止用戶選擇文本

  user-select: none;

3 內(nèi)容選中的效果

這里設(shè)置文本選中的顏色是綠色

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

4 居中最好用的三行代碼

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

示例：

 .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 平滑滾動(dòng)

scroll-behavior: smooth;

6 用戶可調(diào)整元素的大小

 resize: both;

注意：resize除非將overflow屬性設(shè)置為 以外的其他visible值，否則什么都不做，visible是大多數(shù)元素的默認(rèn)值。

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

      }

7 圖片作為光標(biāo)

cursor: url(), auto;

8 打字機(jī)效果

.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">我是用打字機(jī)效果</div>
</div>

到此，相信大家對“實(shí)用CSS效果代碼有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！