Summary of recent knowledge
display:list-item
I haven't used this before. I just happened to see and understand its usage. Record it here.
display: list-item action is: generating a content element to block the cassettes, and subsequently generate a list of inline type cartridge. This attribute can be used to make the content filling frame more convenient when the inline elements are transformed into block elements.
vertical-align
1. When I wrote the layout of the inline block elements, I found that the content was aligned downwards, which caused the layout to be messy. The senior introduced me to use this attribute. When the value of this attribute is top, the content alignment of the code block The problem can be solved by setting it as the upper alignment , and the problem can be solved.
3D
Perspective: Use the attribute of perspective in the parent class; persoective , the larger the perspective value, the more obvious the 3D effect.
Attributes: transform:1.translateX/Y(), which is the distance between the X and Y axes of the adjustment object, divided into positive and negative values for positive and negative directions.
2.rotate(): The function is to rotate the object, the unit is deg.
3.skewX/Y(): The function is to tilt the object, and the unit is the same as deg.
4. scaleX/Y(): The function is to make the object rotate around X/Y.
To convert to a 3D effect, you only need to add the above perspective property with its value to the property of the parent class of the object.
Animation
Animation: I think there are 4 key attributes when writing things in animation when referring to animation;
-The first one is naturally named first (custom) such as myname.
-The second is the cycle of the entire animation, such as 0.3s.
-The third is to specify the time curve of the animation movement, the default is ease , the speed is change, and the more frequently used value is linear , which is used to make the overall animation speed a uniform speed.
-The fourth is animation-direction: whether the function is to play the animation alternately and reversely, the key attribute values are: infinite (infinite loop playback) , reverse (reverse loop can be realized). ,
Secondly, there are naturally two kinds of time periods that define the animation process:
- One is naturally: @keyframes name (custom) { form{} to{} }
- The second is: @keyframes name (custom) { (Use the percentage of the process to define in stages) such as: 0%{} 25%{} 50%{} 75%{} 100%{} } Among these two You can write the attribute changes of the object you want to write, and you can write it in the format you want according to the time period. Note : One point is attribute conflict. When defining the animation format, if it is the same attribute, do not write separately, otherwise the effect will be obscured. Such as: (Example 1) : 0%{ transform: translate(...) transform: rotate(...deg) } The above-mentioned writing method is wrong, the original intention is to realize the movement and rotation of the object, but writing in this way will cause There is only one final effect. (Correct writing) : 0%{ transform: translate() rotate (); } just write like this