Initial Research on css3 and css3 Animation

Initial Research on css3 and css3 Animation

Attribute selector:
1. Completely matched attribute selector. Is a fully matched string.
[Id = article] {
Color: red;
}
2. Contains the matching selector. Contains a specified string.
Syntax: [attribute * = value] attribute refers to the attribute name. value refers to the attribute value, which contains the "* =" symbol.
[Id * = article] {
Color: red;
}
3. The first character matching selector. As long as the start character matches.
Syntax: [attribute ^ = value] attribute refers to the attribute name. value refers to the attribute value, which contains the "^ =" symbol.
[Id ^ = article] {
Color: red;
}
4. Tail character matching selector. Match the ending string.
Syntax: [attribute $ = value] attribute refers to the attribute name. value refers to the attribute value, which contains the "$ =" symbol.
[Id $ = article] {
Color: red;
}

Pseudo class selector:
1. before pseudo-class Element selector, which is used to insert content before an element is selected.
Syntax: Element Tag: before {
Content: "inserted content"
}
P. before {
Content: "text"
}
2. The after pseudo-class Element selector inserts content after an element is selected.
Syntax: Element Tag: after {
Content: "inserted content"
}
P. after {
Content: "text"
}
3. first-child specifies the style of the first element in the element list.
Li: first-child {
Color: red;
}
4. last-child specifies the style of the first element in the element list.
Li: last-child {
Color: red;
}
5. nth-child and nth-last-child can specify the style of an element or the style of an element starting from the last number.
// Specify 2nd li Elements
Li: nth-child (2 ){}
// Specify the last 2nd li Elements
Li: nth-last-child {}
// Specify an even number of li Elements
Li: nth-child (even ){}
// Specify the base li Elements
Li: nth-child (odd ){}

Shadow
1. box-shadow to make the element shadow effect.
Syntax: box-shadow: <length> | color;
The first length is the shadow horizontal offset value;
The second length is the shadow vertical offset value;
The third length is the shadow fuzzy offset value;
The horizontal and vertical values can be negative.
Div {
/* Other browsers */
Box-shadow: 3px 4px 2px #000;
/* Webkit browser */
-Webkit-box-shadow: 3px 4px 2px #000;
/* Firefox */
-Moz-box-shadow: 3px 4px 2px #000;
}
2. text-shadow: Set the shadow effect or blur effect of text content.
Syntax: Same as box-shadow.

Background
1. background-size is used to set the size of the background image.
Syntax: background-size: 10px 5px;
-Webkit-background-size: 10px 5px;
2. background-clip is used to determine the cropping area of the background.
3. backrground-origin is used to specify the start position of the reference coordinate of the background-position attribute.
The upper left corner of the border starts, and the upper left corner of the content area starts padding from the padding area.
4. background:-webkit-gradient (linear, 0 0, 0 100%, from (# fff), to (#000); background gradient

Rounded border
Border-radius:
Border-radius: 10px 5px;
-Moz-border-radius: 10px 5px;
-Webkit-border-radius: 10px 5px;
Or
Border-radius: 10px 5px 10px 5px;
-Moz-border-radius: 10px 5px 10px 5px;
-Webkit-border-radius: 10px 5px 10px 5px;
Viewport virtual window
<Meta name = "viewport" content = "width = device-width, initial-seale = 1, user-scalable = 0"/>
Parameters:
Width specifies the screen width of the virtual window.
Height specifies the screen height of the virtual window.
Initial-scale specifies the initial scaling ratio
Maximum-scale specifies the maximum scale allowed for user Scaling
Minimum-scale specifies the minimum scale allowed for user Scaling
User-scalable specifies whether manual scaling is allowed.
<Link rel = "stylesheet" media = "screen and (min-width: 600px) and (max-width: 900px)" href = "style address"/>
When the screen width is between 600 and ~ This parameter is called at 900.
In portrait Mode
<Link rel = "stylesheet" media = "all and (orientation: portration)" href = "style address"/>
In Landscape mode
<Link rel = "stylesheet" media = "all and (orientation: landscape)" href = "style address"/>
@ Media only screen and (min-width: pixel px ){}
Only mobile browsers automatically ignore this feature,
Unsupported browsers will automatically ignore this style.

Geolocation location.
Navigator. geolocation. getCurrentPosition (function (pos ){
Console. log ("latitude of the current geographic location" + pos. coords. latitude );
Console. log ("longitude of the current geographic location" + pos. coords. longpolling );
Console. log ("accuracy of current latitude" + pos. coords. accuracy );
})