Detailed explanation of the new features of css3

animation IE10

The six major attributes of animation

animation-name specifies the keyframe name that needs to be bound to the selector

animation-duration specifies the time it takes to complete the animation s ms
object.style.animationDuration="3s"

animation-timing-function animation speed curve
Default value ease
object.style.animationTimingFunction="linear"
Syntax animation-timing-function: value

animation-timing-function uses a mathematical function called the Cubic Bezier Bezier curve function to generate the speed curve. You can use your own values ​​or
Defined value

Value: linear at the same speed from beginning to end
ease defaults to speed up from low speed and slow down before the end
ease-in animation starts at low speed
ease-out animation at low speed End
ease-in-out animation starts and ends at low speed
cubic-bezier(n,n,n,n) its own value in the cubic-bezier function. Possible values ​​are numeric values ​​from 0 to 1

animation-deplay Delay before animation starts
animation-delay: time;
JavaScript Syntax :object.style.animationDelay="2s"
animation-delay value is in seconds or milliseconds.
Negative values ​​are allowed, -2s causes the animation to start immediately, but skips 2 seconds to enter the animation

animation-iteration-countThe number of times the animation is played IE10
animation-iteration- count: n|infinite
JavaScript syntax: object.style.animationIterationCount=3

animation-directionWhether the animation should be played in reverse in turn
animation-direction value is "alternate ", the animation will play normally in odd numbers (1, 3, 5, etc.), and play backwards in even numbers (2, 4, 6, etc.
)
animation-direction: normal|alternate;
JavaScript syntax: object.style.animationDirection="alternate"

Default value none 0 ease 0 1 normal
javascript syntax object.style.animation="mymove 5s infinite"

Transition The four major properties of transition IE10

transition-property
transiont-property attribute specifies the name of the transition css property
transition-property: none|all |propertyCSS property name list, separated by commas;
JavaScript syntax: object.style.transitionProperty="width,height"

transition-duration CompleteTransition effectHow many seconds or milliseconds it takes
transition-duration: time;
JavaScript syntax: object.style.transitionDuration="5s"

transition-timing-function: 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"
transition-delay: time;

Default Value all 0 ease 0
transition:property duration timing-function delay
javascript syntax：object.style.transition="width 2s"

transform IE10
transform allows us to rotate, scale, move, or tilt elements
Default none
javascript syntax object.style.transform="rotate(7deg)"
transform: none|transform-functions;

none does not perform conversion
matrix(n,n,n,n,n,n) uses a matrix of six values
matrix3d(n,n,n, n,n,n,n,n,n,n,n,n,n,n,n,n) 4x4 matrix using 16 values
translate(x,y)2D transformation
translate3d(x ,y,z)3D conversion
translateX(x) just uses the value of the X axis
translateY(y) just uses the value of the Y axis
translateZ(z) just uses the value of the Z axis
scale (x,y)2D scaling
scale3d(x,y,z)3D scaling
scaleX(x),scaleY(y),scaleZ(z)
rotate(angle) 2D rotation, in parameters Specify angle
rotate3d(x,y,z,angle)3D rotation
rotateX(angle),rotateY(angle),rotateZ(angle)
skew(x-angle,y-angle) Define along 2D skew transformation of X and Y axes
skewX(angle) skewY(angle) perspective(n)

Newcss3 selector

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 feature
Font-face can be used to load font styles, and it can also load server-side font files, allowing the client to display fonts that the client does not

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

1 @font-face { 
 2 font-family: BorderWeb; 
 3 src:url(BORDERW0.eot); 
 4 } 
 5 @font-face { 
 6 font-family: Runic; 
 7 src:url(RUNICMT0.eot); 
 8 } 9 10 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
11 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

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

The above is the detailed content of Detailed explanation of the new features of css3. For more information, please follow other related articles on the PHP Chinese website!