32 special CSS usage

animation parameter 
animation: name (animated name), duration (operation cycle), timing-function (running track), delay (latency), iteration-count (number of plays), direction (whether or reverse rotation);
animation: circleAnimation Normal Linear 0s Infinite lS;
`` `css
@keyframes circleAnimation {
0% {
Transform: Rotate (0deg);
}
100 {%
Transform: Rotate (-360deg);
}
}
` ``

single-line text overflow ellipsis
`` `css
{div
overflow: hidden; / * overflow hide * /
text-overflow: ellipsis; / * hidden portions represented by ... * /
White-Space: nowrap; / * text can not switch * /
}
`
top => Location => Code
`` `HTML: RUN
<div style =" position: Fixed; top: 0; left: 0; ">
top location code: content area
</ div>
`` `
Transform attribute conversion elements move (translate), scaling (scale), rotation (Rotate) or inclination (skew).
transform: position translate and: the difference between the relative
`` `CSS
<div style =" width: 500px; height: 800px; border: 1px Solid Green; margin: Auto 0; ">
<div style =" width: 200px; height: 100px; border: 1px Solid Blue; Transform: Translate (50%); "> </ div>
<- Transform:! Translate (50%) 50% offset their width; ->
<div style = "width: 200px; height: 100px; border: 1px Solid Green; position: relative; left: 50%;"> </ div>
<- position:! relative; left: 50% offset width of the box 50 of the parent %; ->
</ div>
`` `
background-position property of the starting position of the background image.
CSS `` `
div {
background-position: left Top;
/ * If only one key, the other value will be"

/ * If only one value, the other value will be 50% * /
background-position: 5px 5px;
/ * If only one value, the other value will be 50% * /
background-position: 30% Top;
/ % * may be mixed and used * Top /
}
`` `
` `` HTML: RUN
<DOCTYPE HTML!>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<style>
.my-Cell [class * Cell =] {
background: Red;
}
.my-Cell {
background: Green;
}
</ style>
</ head>
<body>
<div class = "My-Cell"> div </ div>
</ body>
< / HTML>
`` `

Guess you like

Origin www.cnblogs.com/gushixianqiancheng/p/10966387.html