JAVAEE--CSS font style effects

Statement: The material used in this column is written by the VIP students of the Kay Academy, who has the right to be anonymous and has the final right to interpret the article; The Edith Academy is designed to promote students to learn from each other on the basis of public notes.

Style effect: 2D conversion:

The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements.
Where the rotate attribute is used to define the 2D rotation, the attribute parameter is filled with the angle of rotation.
Image Rotation code example:

Operation Result:

Scale (x, y) sets 2D scaling, and scales (×) defines the scaling transformation only by setting the value of the x-axis, code example:

Operation Result:

Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes, in the angle deg, code example:

Operation Result:

Mind Mapping:

Other properties are used in the following ways:

Transition properties:
The Transition property is a property that sets the transition effect, and you can set transitions for 2D transitions, transitions with wide variations, backgrounds, or font colors.

This property is used in conjunction with hover, and when the mouse moves to an element that changes the definition, a transition effect occurs, and the 2D scaling Transition Effect code example:

Operation Result:

Width and background color transitions, code examples:

In fact, the logic is very simple, is first in the label style first define the initial style effect and the properties and time to transition, and then in the label's hover state style to define the style effect of the mouse move up, the transition is actually to change the style effect of the process has become slow.

Operation Result:

Example of a rotation transition code:

Operation Result:

The above is just an introduction to the Transition property that specifies how many seconds or milliseconds to complete the transition effect, and there are several other effects that can be referred to in the following syntax, or access to W3cshool Web site queries for more usage.

Website: http://www.w3school.com.cn/cssref/pr_transition.asp

div Layer Production:

Let's introduce several properties:
The Position property is used to specify the positioning type of the element.

The absolute value of the Position property is used to generate an absolutely positioned element, positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
In fact, simply by absolute positioning, elements can be placed anywhere on the page, such as Div, I set the div absolute positioning can be arbitrary through "left", "Top", "right" and "bottom" property set its position in the page.
code example:

Operation Result:

The Z-index property, which defines the sequence number of the div layer, for example: Z-index property with a value of 2, is above the layer with the Z-index attribute value 1.
code example:

Operation Result:

In combination with the above mentioned knowledge points, we can do a simple example, such as: when we log on to a website's account, we will find that when the login input box pop out in addition to the login input box can not click on the other parts of the page, this is actually using the DIV layer effect, the page is covered. And some of the login input boxes when we move the mouse up there will be a rotation amplification and other effects, which is used to the transition style. Now let's do a page like this.
code example:

Operation Result:

JAVAEE--CSS font style effects