収集する価値のある8つの実践的なCSSエフェクトコード（共有）

この記事では、CSS 開発者が知っておくべき 8 つの興味深い CSS エフェクト コードを紹介します。収集する価値があります。見てみましょう。

#1 入力ボックスのカーソルの色を変更します

MDN:

caret-color 属性は、挿入カーソル (キャレット) の色を定義するために使用されます。ここで説明する挿入カーソルは、編集可能なカーソルでユーザーを示すために使用されます。 Web ページの領域。点滅する縦棒 | が挿入される特定の場所を入力します。 (学習ビデオ共有: css ビデオ チュートリアル )

たとえば、カーソルを青色に設定します

input{

caret-color:blue;
}

2 コード行により、ユーザーがテキストを選択することが禁止されています

  user-select: none;

#3 コンテンツ選択の影響#ここにテキストを設定します 選択した色は緑です

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

#4 中央揃えに最適な 3 行のコード

#

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 スムーズなスクロール

#

scroll-behavior: smooth;

# #6 ユーザー調整可能な要素

 resize: both;

のサイズ 注:

resize

overflow プロパティが # 以外の値に設定されていない限り、何も起こりません。 ##visible どちらも行わないでください。visible は、ほとんどの要素のデフォルト値です。

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

      }

7 カーソルとしての画像

cursor: url(), auto;

8 タイプライター効果

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

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上が収集する価値のある8つの実践的なCSSエフェクトコード（共有）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。