8 codes d'effet CSS pratiques qui valent la peine d'être collectés (partagés)

Cet article partage 8 codes d'effets CSS intéressants que les développeurs CSS doivent connaître. Ils valent la peine d'être collectés.

1 Changer la couleur du curseur de la zone de saisie

MDN:caret-colorcaret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。（学习视频分享：css视频教程）

例如我们将光标设置为蓝色

input{

caret-color:blue;
}

2 一行代码禁止用户选择文本

  user-select: none;

3 内容选中的效果

这里设置文本选中的颜色是绿色

.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 平滑滚动

scroll-behavior: smooth;

6 用户可调整元素的大小

 resize: both;

注意：resize除非将overflow属性设置为 以外的其他visible l'attribut est utilisé pour définir la couleur du

insérer le curseur

(caret ), comme mentionné ici Le curseur d'insertion est la barre verticale clignotante | qui est utilisée pour indiquer où la saisie de l'utilisateur sera insérée dans la zone modifiable de la page Web. (Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Par exemple, nous définissons le curseur Il est bleu

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

      }

2 Une ligne de code interdit aux utilisateurs de sélectionner du texte

cursor: url(), auto;

3 L'effet de la sélection de contenu

La couleur de la sélection de texte ici est définie sur vert

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

🎜🎜🎜🎜4 Les trois plus utiles lignes de code au centre🎜🎜🎜

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

🎜Exemple : 🎜rrreee🎜🎜🎜🎜🎜5 Défilement fluide🎜🎜🎜rrreee🎜🎜🎜6 Éléments redimensionnables par l'utilisateur🎜🎜🎜rrreee🎜Remarque : redimensionner sauf si le L'attribut overflow est défini sur une valeur autre que visible, sinon rien ne sera fait, visible est la valeur par défaut pour la plupart des éléments. 🎜🎜🎜🎜🎜🎜Rrreee 作为7 image comme curseur 🎜🎜🎜 RRREEEE🎜🎜🎜8 Effets du joueur 🎜🎜🎜 Rreeerrreee 🎜🎜🎜🎜 Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!