What are the practical CSS effect codes?
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!
