Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the practical CSS effect codes". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what are the practical CSS effect codes?"

1 change the cursor color of the input box

The MDN:caret-color attribute is used to define the color of the insertion cursor (caret), which is the vertical bar shaped like a vertical bar that is used to indicate where the user's input will be inserted in the editable area of the page.

For example, we set the cursor to blue

Input {caret-color:blue;}

2 lines of code prohibit users from selecting text

User-select: none

3 effect of content selection

Set here that the selected color of the text is green.

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

4 the best three lines of code to use in the middle

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

Example:

.child {width: 200px; height: 200px; border: solid # 0002px; display: flex; align-items: center; justify-content: center;} .child {width: 50px; height: 50px; border: solid red 2px;}

5 smooth scrolling

Scroll-behavior: smooth

6 the user can resize the element

Resize: both

Note: resize does nothing unless the overflow property is set to something other than the visible value, and visible is the default value for most elements.

Width: 200px; height: 200px; border: solid # 0002px; display: flex; align-items: center; justify-content: center; resize: both; overflow: auto;}

7 Pictures as cursors

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;}} I am using typewriter effects

At this point, I believe that everyone on the "practical CSS effect code what" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.