Disclaimer: The materials used in this column are written by VIP students of Kaige Academy. Students have the right to remain anonymous and have the right to final interpretation of the article. Kaige Academy aims to promote VIP students to learn from each other based on public notes.
CSS3 Simple Animation
Some simple animation effects can be achieved in CSS3, so the following are some basic animation effects production methods.
The first thing to know is the @keyframes rule, @keyframes is the rule used to define the animation process, because the so-called animation is actually the process of changing from one set of styles to another set of styles, declaring @keyframes needs to define its name, it needs to be This rule is referenced by name in the style.
There are two attributes in @keyframes: form and to. The form attribute is used to define the start of the animation, and the initial state of the style needs to be defined in the form. The to attribute is used to define the end of the animation. The final state of the style needs to be defined in to. The animation is such a process of changing from the initial state to the final state.
Then in the style description, you need to use the animation property to refer to the rule and define the time for an animation to complete, which can be in seconds or milliseconds.
Code example:
operation result:
Using form and to can only define the start and end, if you want to define it in more detail, you can use the percentage method. 0% is equivalent to form, 100% is equivalent to to, you can also set 25%, 50% and so on. Using percentages can define the style of the animation gradient process in a more detailed way, for example, from 0% to 25%, the background color will change from red to blue, and then from 25% to 50%, the background color will change from blue. Color gradient to gray, 50% to 75% background color will gradient from gray to black, 50% to 75% background color will gradient from black to red, so each % defined is equivalent to a node, a gradient node .
The animation-iteration-count property is used to define the number of times the animation loops.
The following uses an actual case to illustrate, code example:
operation result:
Margin property: A
little introduction to the margin property. This property is used to adjust the outer margin of the element. It is also called the block property. There are four ways to write this property, which can control four margins: top, bottom, left, right.
Example 1: margin: 10px 5px 15px 20px;
meaning:
top margin is 10px
right margin is 5px
bottom margin is 15px
left margin is 20px
Example 2: margin: 10px 5px 15px;
meaning:
top margin is 10px
right margin and left margin is 5px
bottom margin is 15px
Example 3: margin: 10px 5px;
meaning:
top and bottom margins are 10px
right and left margins are 5px
Example 4: margin: 10px;
Meaning: All 4 margins are 10px
In addition, there is an attribute: line-height, which is used to set the line height. It is generally used in conjunction with text-align to center the text in the element.
Code example:
operation result:
Sometimes we find elements that don't fit snugly against the browser's borders:
This is because the default value of the margin property of the body is 10px, and changing the value of the margin property of the body to 0px will not have such a phenomenon.
Code example:
operation result:
Make menus with lists
We can open a web page at will, check the source code of the web page, and we can find that the menus, navigation bars and the like on the page are basically made using the ul unordered list, because the ul unordered list contains data structure comparison Well, each li tag contains a piece of data. If you want to add data, just add an li tag. To delete data, you can just delete the li tag directly. And actually using the list for menus, navigation bars, etc. is actually very simple: first use the list-style property to remove the black dot style that comes with the unordered list, and then use the float-left property to make the list float. The rest is to adjust the font color, width and height, background color, layout, etc.
Code example:
operation result:
