Home > Web Front-end > CSS Tutorial > 8 practical CSS effect codes worth collecting (share)

8 practical CSS effect codes worth collecting (share)

青灯夜游
Release: 2021-12-20 09:04:17
forward
3303 people have browsed it

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

8 practical CSS effect codes worth collecting (share)

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;
}
Copy after login

8 practical CSS effect codes worth collecting (share)

2 A line of code prohibits users from selecting text

  user-select: none;
Copy after login

3 The effect of content selection

Set the text here The selected color is green

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

8 practical CSS effect codes worth collecting (share)

4 The best three lines of code for centering

display: flex;
          align-items: center;
          justify-content: center;
Copy after login

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;
  }
Copy after login

8 practical CSS effect codes worth collecting (share)

5 Smooth scrolling

scroll-behavior: smooth;
Copy after login

6 User-adjustable elements The size of

 resize: both;
Copy after login

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;

      }
Copy after login

8 practical CSS effect codes worth collecting (share)

7 Picture as cursor

cursor: url(), auto;
Copy after login

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;
        }
      }
Copy after login
<div class="container">
      <div class="typing">我是用打字机效果</div>
</div>
Copy after login

8 practical CSS effect codes worth collecting (share)

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!

Related labels:
css
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template