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

This article mainly introduces the relevant knowledge of "what are the commonly used attributes of CSS3". The editor shows you the operation process through an actual case, the operation method is simple and fast, and it is practical. I hope this article "what are the commonly used attributes of CSS3" can help you solve the problem.

Selector

Value1~value2

P~ul selects ul in p element

[attribute^ = value]

A [src ^ = "https"] Select each element whose src attribute value begins with "https"

[attribute$=value]

A [src$= ".pdf"] Select all elements whose src attribute ends with ".pdf"

[attribute*=value]

A [src*= "abc"] Select each element whose src attribute contains a "abc" substring

: first-of-type

P:first-of-type selects the first one that belongs to its parent element

Each of the elements

element

: last-of-type

P:last-of-type selects the last that belongs to its parent element

Each of the elements

element

: only-of-type

P:only-of-type chooses the only one that belongs to its parent element

Each of the elements

element

: only-child

P:only-child selects each of the only child elements that belong to its parent element

element

: nth-child (n)

P:nth-child (2) selects each of the second child elements that belong to its parent element

element

: nth-last-child (n)

P:nth-last-child (2) same as above, counting from the last child element

: nth-of-type (n)

P:nth-of-type (2) selects the second one that belongs to its parent element

Each of the elements

element

: nth-last-of-type (n)

P:nth-last-of-type (2) is the same as above, but counts from the last child element

: last-child

P:last-child selects each of the last child elements that belong to its parent element

element

: root

: root selects the root element of the document

: empty

P:empty selects each that does not have child elements

Elements (including text nodes)

: target

# news:target Select the currently active # news element

: enabled

Input:enabled selects each enabled element

: disabled

Input:disabled selects each disabled element

: checked

Input:checked selects each selected element

: not (selector)

: not (p) Select not

Each element of an element

:: selection

:: selection selects part of the animation animation of the element selected by the user

@ keyframes allows developers to control the intermediate links of CSS animation by specifying the style of keyframes that must be displayed at a specific point in time.

Animation: name duration timing-function delay iteration-count direction;animation-name specifies the name of the keyframe that needs to be bound to the selector. Animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds. Animation-timing-function specifies the speed curve of the animation. Animation-delay specifies the delay before the animation starts. Animation-iteration-count specifies how many times the animation should be played. Animation-direction specifies whether the animation should be played in reverse in turn.

@ keyframes animation-name {keyframes-selector {css-styles;}}

Animationname defines the name of the animation keyframes-selector the percentage of animation time. Legal value: 0-100%from (same as 0%) to (same as 100%) css-styles is required. One or more legitimate CSS style attributes

Animation-fill-mode

-none default, back to the initial state-forwards when the animation is complete, keep the last attribute value-both takes turns applying forwards and backwards rules according to animation-direction-backwards applies the start attribute value (defined in the first Keyframe) for a period of time specified by animation-delay before the animation is displayed.

Animation-play-state

-running playback-paused pauses 2D/3D conversion properties

2D deformation (translate)

The first parameter of translate specifies the displacement of the X axis and the second parameter specifies the displacement of the Y axis.

TranslateX specify displacement of X axis translateY specify displacement of Y axis translateZ specify displacement of Z axis translate3D the first parameter specifies the displacement of the X axis, the second parameter specifies the displacement of the Y axis, and the third parameter specifies the displacement of the Z axis

3D deformation (transform)

Translate shift

Rotate rotation

Rotate3D (): 3D rotation, you must specify four parameters, the first three parameters represent the direction of rotation x y z, the fourth parameter represents the rotation angle; rotateX (): specify the rotation angle of the X axis; rotateY (): specify the rotation angle of the Y axis; rotateZ (): specify the rotation angle of the Z axis.

Scale Zoom

Scale (XBI y) defines 2D scaling transformations. Scale3d defines 3D scaling transformations. ScaleX defines the scaling transformation by setting the value of the X axis. ScaleY defines the scaling transformation by setting the value of the Y axis. ScaleZ defines the 3D scaling transformation by setting the value of the Z axis.

Skew oblique cut

-skew the first parameter corresponds to the X axis [must], the second parameter corresponds to the Y axis [when not set, the default is 0];;-skewX specifies the oblique cutting of the X axis;-skewY specifies the oblique cutting of the Y axis; this is the end of the content on "what are the commonly used attributes of CSS3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.