Ausführliche Erläuterung der neuen Funktionen von CSS3

animation IE10

Die sechs Attribute der Animation

animation-name gibt den Keyframe-Namen an, an den der Selektor gebunden werden muss

animation-duration gibt die Zeit an, in der er ausgeführt wird dauert, um die Animation abzuschließen s ms
object.style.animationDuration="3s"

animation-timing-function Animationsgeschwindigkeitskurve
Standardwert Ease
object.style.animationTimingFunction="linear „
Syntax Animation-Timing-Funktion: Wert

Animation-Timing-Funktion verwendet eine mathematische Funktion namens Kubische Bezier-Bezier-Kurvenfunktion, um die Geschwindigkeitskurve zu generieren. Sie können Ihren eigenen Wert oder
verwenden um es voreinzustellen. Definierter Wert

Wert: linear mit der gleichen Geschwindigkeit von Anfang bis Ende
ease Standardgeschwindigkeit beginnt mit niedriger Geschwindigkeit und verlangsamt sich vor dem Ende
ease-in-Animation beginnt mit niedriger Geschwindigkeit
Ease-Out-Animation bei niedriger Geschwindigkeit Ende
Ease-In-Out-Animation beginnt bei niedriger Geschwindigkeit und endet
Cubic-Bezier(n,n,n,n) eigener Wert in der Kubik-Bezier-Funktion. Mögliche Werte sind numerische Werte von 0 bis 1

animation-deplay Verzögerung vor Beginn der Animation
animation-delay: Zeit;
JavaScript Syntax:object.style.animationDelay="2s"
Animationsverzögerungswert wird in Sekunden oder Millisekunden angegeben.
Negative Werte sind zulässig, -2s bewirkt, dass die Animation sofort startet, überspringt jedoch 2 Sekunden, um die Animation einzugeben.

animation-iteration-countDie Häufigkeit, mit der die Animation ausgeführt wird wird abgespielt IE10
animation-iteration- count: n|infinite
JavaScript-Syntax: object.style.animationIterationCount=3

animation-directionOb die Animation rückwärts abgespielt werden soll wiederum
Animationsrichtungswert ist „alternativ“, die Animation wird normal in ungeraden Zahlen (1, 3, 5 usw.) und rückwärts in geraden Zahlen (2, 4, 6 usw.) abgespielt.
)
animation-direction: normal|alternate;
JavaScript-Syntax: object.style.animationDirection="alternate"

Standardwert keiner 0 einfach 0 1 normal
Javascript-Syntax object.style.animation="mymove 5s unendlich"

Übergang Die vier Eigenschaften des Übergangs IE10

transition-property
transiont-property-Attribut gibt den Namen des Übergangs-CSS an property
transition-property: none|all |propertyCSS-Eigenschaftsnamenliste, durch Kommas getrennt;
JavaScript-Syntax: object.style.transitionProperty="width,height"

transition-duration Wie viele Sekunden oder Millisekunden dauert es, bis der Übergangseffekt
transition-duration: time;
JavaScript abgeschlossen ist Syntax: object.style.transitionDuration="5s"

Übergangs-Timing-Funktion: linear|ease|ease-in|ease-out|ease-in-out|cubic-
Bezier (n,n,n,n);
JavaScript-Syntax: object.style.transitionTimingFunction="linear"

transition-delay
JavaScript-Syntax: object.style.transitionDelay=" 2s"
Übergangsverzögerung: Zeit;

Standardwert alle 0 Leichtigkeit 0
Übergang:Eigenschaftsdauer Timing-Funktionsverzögerung
Javascript-Syntax: object.style. transit="width 2s"

transform IE10
transformation ermöglicht es uns, Elemente zu drehen, zu skalieren, zu verschieben oder zu neigen
Standard: keine
Javascript-Syntaxobjekt .style.transform="rotate(7deg)"
transform: none|transform-functions;

none transformiert nicht
matrix(n,n,n,n,n,n) verwendet eine Matrix aus sechs Werten
matrix3d(n,n,n, n,n,n,n,n,n,n,n,n,n,n,n,n) unter Verwendung einer 4x4-Matrix aus 16 Werten
translate(x,y)2D-Transformation
translate3d(x ,y,z)3D-Konvertierung
translateX(x) verwendet nur den Wert der X-Achse
translateY(y) verwendet nur den Wert der Y-Achse
translateZ(z) verwendet nur den Wert der Z-Achse
scale (x,y)2D-Skalierung
scale3d(x,y,z)3D-Skalierung
scaleX(x),scaleY (y),scaleZ(z)
rotate(angle) 2D-Rotation, in Parametern Winkel angeben
rotate3d(x,y,z,angle)3D-Rotation
rotateX(angle),rotateY(angle), rotierenZ(Winkel)
skew(x-angle,y-angle) definiert entlang der 2D-Schrägtransformation der >@Font-face-Funktionen
Font-face kann zum Laden von Schriftarten verwendet werden und kann auch den Server laden -seitige Schriftartdateien, die es dem Client ermöglichen, Schriftarten anzuzeigen

die der Client nichtinstalliert hat 🎜>Font-Face-Client-Schriftfall

1 E:nth-last-child(n)  
2 E:nth-of-type(n)  
3 E:nth-last-of-type(n)  
4 E:last-child  
5 E:first-of-type  
6 E:only-child  
7 E:only-of-type  
8 E:empty  
9 E:checked 
10 E:enabled 
11 E:disabled 
12 E::selection 
13 E:not(s)
14 E::not(.s)
15 body: nth-child(even), nth-child(odd)/*：此处他们分别代表了表格（tbody）下面的偶数行和奇数行（tr）*/等等......

Font-Face-Server-Schriftfall

Zeilenumbruch

<p><font face="arial">arial courier verdana</font></p>

Legen Sie fest oder rufen Sie ab, ob die Zeile umgebrochen werden soll, wenn die aktuelle Zeile die Grenze überschreitet angegebener Container, und der Text wurde zu diesem Zeitpunkt aufgeteilt

Text-overflow它与 word-wrap 是协同工作
word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容 
器的边界时如何显示

1 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
2 width:200px;background:#ccc;} 
3 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
4 width:200px; background:#ccc;}

1 d0435d2b2e055c11b673eee7d0204ab9 不显示省略标记，而是简单的裁切条94b3e26ee717c64999d7867364b1b4a32 3 0d1f0cdb484413c5c94d20f08feb90c5 当对象内文本溢出时显示省略标记94b3e26ee717c64999d7867364b1b4a3

文本渲染

1 p { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

文本渲染

1 p { 
2 -webkit-text-fill-color: black; 
3 -webkit-text-stroke-color: red; 
4 -webkit-text-stroke-width: 2.75px; 
5 }

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度

gradient 渐变效果
线性渐变 linear左上（0% 0%）到右上(0% 100%)

background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

径向渐变radial从一个圆到一个圆的渐变
background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));

css3的阴影shadow和反射reflect

background-clip:border-box;背景从border开始显示；
background-clip：padding-box
background-clip：content-box
background-clip:no-clip:no-clicp默认属性等同于border-box

background-origin 用于确定背景的位置 通常与background-positon联合使用

background-size来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是 
一个整体一 样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

counter()=[counter(name) | counters(name,list-style-type)]{1,}

counter-reset IE8

counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用 "display: none"，则无法重置计数器。如果使用 "visibility: hidden"，则可以重置计数器

JavaScript 语法： object.style.counterReset="subsection"

counter-reset的值none id number inherit

attr()=attr(attr-name)插入元素的属性值 IE8

calc() =calc(四则运算) 动态计算长度值 IE9
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

initial属于css-wide关键字，这表示所有的属性都可以接受该值 IE11

unset 擦除属性声明

颜色值
color color的颜色名称，HEX，RGB，RGBA，HSL，HSLA，transparent,currentColor

currentColor

resolution分辨率值不允许有负值
频率单位包括有： dpi, dpcm, dppx

角度值 angle角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
角度单位包括有： deg, grad一个圆共400梯度, rad 一个圆共2π弧度, turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

长度值与单位

ch 数字“0”的宽度 ie9

rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vw相对于视口的宽度。视口被均分为100单位的vw ie9
vh 相对于视口的高度。视口被均分为100单位的vh
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
q 1/4毫米（quarter-millimeters）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

@import@media@font-face@keyframes@supports

E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholderE::selection

E:not(s)
E:root
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target

属性选择器
E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素

【相关推荐】

1. CSS3免费视频教程

2. 分享一个CSS3的动画库

3. CSS3学习之Animation详解

4. CSS3教学之动画制作学习

5. 详细分析关于CSS3中新增的特性

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der neuen Funktionen von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!