Explication détaillée des nouvelles fonctionnalités de CSS3

animation IE10

Les six attributs de l'animation

animation-name spécifie le nom de l'image clé à laquelle le sélecteur doit être lié

animation-duration spécifie l'heure à laquelle il prend pour terminer l'animation s ms
object.style.animationDuration="3s"

courbe de vitesse d'animation de la fonction de synchronisation d'animation
Facilité de valeur par défaut
object.style.animationTimingFunction="linear "
Syntaxe animation-timing-function : valeur

animation-timing-function utilise une fonction mathématique appelée fonction de courbe de Bézier cubique de Bézier pour générer la courbe de vitesse. Vous pouvez utiliser votre propre valeur ou
pour préréglez-le. Valeur définie

Valeur : linéaire à la même vitesse du début à la fin
facilité La vitesse par défaut commence à basse vitesse et ralentit avant la fin
l'animation de facilité commence à basse vitesse
Animation de facilité de sortie à basse vitesse Fin
L'animation de facilité d'entrée commence à basse vitesse et se termine
cubic-bezier(n,n,n,n) propre valeur dans la fonction cubique-bezier. Les valeurs possibles sont des valeurs numériques de 0 à 1

animation-deplay Délai avant le début de l'animation
animation-delay : time;
JavaScript Syntaxe :object.style.animationDelay="2s"
la valeur du délai d'animation est en secondes ou en millisecondes.
Les valeurs négatives sont autorisées, -2s provoque le démarrage immédiat de l'animation, mais saute 2 secondes pour entrer dans l'animation

animation-iteration-countLe nombre de fois l'animation est joué IE10
animation-iteration-count: n|infinite
Syntaxe JavaScript: object.style.animationIterationCount=3

animation-directionSi l'animation doit être jouée à l'envers à son tour
la valeur de direction d'animation est "alternative", l'animation sera jouée normalement en nombres impairs (1, 3, 5, etc.), et sera jouée à l'envers en nombres pairs (2, 4, 6, etc.
)
animation-direction : normal|alternate ;
Syntaxe JavaScript : object.style.animationDirection="alternate"

Valeur par défaut aucune 0 facilité 0 1 normale
Syntaxe Javascript object.style.animation="mymove 5s infinite"

Transition Les quatre propriétés de la transition IE10

transition-property
transiont-property l'attribut précise le nom de la transition css property
transition-property : none|all |propertyCSS liste de noms de propriétés, séparés par des virgules ;
Syntaxe JavaScript : object.style.transitionProperty="width,hauteur"

durée de transition Combien de secondes ou de millisecondes faut-il pour terminer l'effet de transition
durée de transition : temps;
JavaScript syntaxe : object.style.transitionDuration="5s"

fonction de synchronisation de transition : linéaire|facilité|facilité-in|facilité-out|facilité-in-out|cubic-
bézier (n,n,n,n);
Syntaxe JavaScript : objet style.transitionTimingFunction="linear"

délai de transition
Syntaxe JavaScript : object.style.transitionDelay=" 2s"
transition-delay: time;

Valeur par défaut all 0 facilite 0
transition:property duration timing-function delay
syntaxe javascript: object.style. transition="width 2s"

transform IE10
transform nous permet de faire pivoter, redimensionner, déplacer ou incliner des éléments
aucun par défaut
objet de syntaxe javascript .style.transform="rotate(7deg)"
transform : aucun|transform-functions;

aucun ne convertit
matrix(n,n,n,n,n,n) utilise une matrice de six valeurs
matrix3d(n,n,n, n,n,n,n,n,n,n,n,n,n,n,n,n) utilisant une matrice 4x4 de 16 valeurs
translate(x,y)Transformation 2D
translate3d(x,y,z)Conversion 3D
translateX(x) utilise simplement la valeur de l'axe X
translateY(y) utilise simplement la valeur de l'axe X Axe Y
translateZ(z) utilise simplement la valeur de l'axe Z
échelle (x,y)mise à l'échelle 2D
scale3d(x,y,z)mise à l'échelle 3D
scaleX(x),scaleY (y),scaleZ(z)
rotate(angle) Rotation 2D, en paramètres Spécifiez l'angle
rotate3d(x,y,z,angle)Rotation 3D
rotateX(angle),rotateY(angle), rotateZ(angle)
skew(x-angle,y-angle) définit le long de la transformation d'inclinaison 2D des >@Font-face Features
Font-face peut être utilisé pour charger des styles de police, et il peut également charger le serveur -fichiers de polices côté, permettant au client d'afficher les polices

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）*/等等......

Police- cas de police du serveur Face

Word-wrap

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

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

不显示省略标记，而是简单的裁切条

当对象内文本溢出时显示省略标记

文本渲染

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中新增的特性

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!