8 practical CSS effect codes worth collecting (share)

This article shares 8 interesting CSS effect codes that CSS developers must know. They are worth collecting. Let’s take a look!

1 Change the cursor color of the input box

MDN:## The #caret-color attribute is used to define the color of the insert cursor (caret). The insertion cursor mentioned here is the one used to indicate the user in the editable area of ​​the web page. Enter the specific location where the flashing vertical bar | will be inserted. (Learning video sharing: css video tutorial)

For example, we set the cursor to blue

input{

caret-color:blue;
}

2 A line of code prohibits users from selecting text

  user-select: none;

3 The effect of content selection

Set the text here The selected color is green

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

4 The best three lines of code for centering

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

Example :

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

scroll-behavior: smooth;

6 User-adjustable elements The size of

 resize: both;

Note:

resize Nothing unless the overflow property is set to a value other than visible Do neither, visible is the default value for most elements.

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

      }

7 Picture as cursor

cursor: url(), auto;

8 Typewriter effect

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

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of 8 practical CSS effect codes worth collecting (share). For more information, please follow other related articles on the PHP Chinese website!