最全CSS3 新特性总结 - 网站源码_资源分享

CSS3的新优点大体分成下列五类

1.CSS3示例

2.CSS3前面板与梯形

3.CSS3大背景与蓝紫色

4.CSS3过渡阶段

5.CSS3转换

6.CSS3动画电影

上面依次想来以内五类都有什么样文本

CSS3示例

1.基本上示例

基本上示例又分成

子示例交界处兄妹示例通用型兄妹示例聊天室示例

2.优点示例

1.element[attribute]

为暗含attribute优点的原素增设式样

2.element[attribute=value]

为attribute=value优点的原素增设式样

3.element[attribute~=value]

优先选择attribute优点值包涵单字value的原素并增设式样

4.element[attribute*=value]

优先选择attribute优点值包涵value的原素增设式样

5.element[attribute^=value]

优先选择attribute优点值是以value开头的元素

6.element[attribute$=value]

优先选择attribute优点值是以value结尾的原素

PS：注意比较3和4的区别

3.伪类示例

动态伪类

定义：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。

1.锚点伪类

:link :visited

2.用户行为伪类

:hover :active :focus

3.目标伪类

:target 当我们点击锚点链接时，对应id的原素会显示在视口

4.checked状态伪类

这里我们需要知道checkbox只能增设宽高，不能增设大背景和前面板，如果想要增设那么我们需要用appearance:none;来清除input的默认式样

CSS3结构类：nth示例

：first-child/last-child

语法 element:first-child

优先选择属于父原素的首个/最后一个子原素的每个element原素，注意element为子原素。

：nth-child(n)

优先选择某原素下的第n个element原素（n是一个简单的表达式，不能用其他的字母代替），括号里还可以传odd和even两个关键字

：nth-last-child(n)

匹配属于某原素下的第n个element子原素，从最后一个子原素开始计数

：nth-of-type(n)

语法 element:nth-of-type(n)

匹配属于父原素的特定类型的第n个子原素,element为指定类型的子原素

:nth-last-of-type

匹配属于父原素的特定类型的第n个子原素，从最后一个计数

:first-of-type/:last-of-type

匹配属于其父原素的特定类型的首个/最后一个子原素的每个原素

：only-child

匹配属于父原素的唯一子原素的每个原素

：only-of-type

匹配属于其父原素特定类型的唯一子原素的每个原素

：empty

匹配没有子原素（包括文本节点）的每个原素

否定示例：not

定义：匹配非原素或者示例的每个原素

语法：父原素：not(子原素或者示例)

例：ul:not(span){}

伪原素(也可以使用：)

element::first-line

定义：对原素的第一行文本进行增设，只能用于块级原素

element::first-letter

定义：用于向文本的首字母增设特殊式样，只能用于块级原素

element::before

定义：在原素的文本前面插入新文本，常与content配合使用

element::after

定义：在原素的文本后面插入新文本，常与content配合使用

element::selection

定义：用于增设浏览器中选中文本后的大背景色与前景色

伪原素与原素的区别:

无法通过浏览器开发者工具直接查看

伪原素默认是 inline

使用伪原素注意事项：

1.使用伪原素before,after必须增设content

2.使用伪原素before,after显示大背景图，一定要使用display增设为块原素

3.使用伪原素before,after增设为display:inline-block,需要再次增设vertical-align:middle

CSS3前面板与梯形

1.CSS3梯形border-radius

定义：可以为原素添加梯形前面板（块原素，行内块原素，行内原素）

优点：

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

复合优点：border-radius：

优点值

四个值：左上角右上角右下角左下角

三个值：左上角右上角和左下角右下角

两个值：左上角和右下角右上角和左下角

一个值：4个角都生效

border-radius中的优点值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表梯形的水平半径，value2代表梯形的垂直半径。

圆形与椭圆：

一旦使用百分比，参照的是原素本身的高度与宽度

当拿50%时，宽等于高为圆形宽不等于高为椭圆形

2.盒阴影box-shadow

定义：可以控制一个或多个下拉阴影的框

语法：box-shadow: 水平方向的偏移量垂直方向的偏移量模糊程度扩展程度颜色是否具有内阴影

优点值的介绍：

偏移量：

把原素左上角（0，0）作为基准点，找水平方向和垂直方向的偏移量水平：正值 — 右，负值 — 左垂直：正值 — 下，负值 — 上

模糊程度：

边界模糊，但是边界线未动由边界线向外模糊多少像素

扩展程度：

盒子阴影，上下左右都向外扩展多少像素

是否具有内阴影：

inset(默认没有，也就是默认是外阴影) 加上inset,盒子的阴影为内阴影扩展程度可为负值，但是模糊程度不可以

CSS3大背景与蓝紫色

1.CSS3大背景

background-image

语法：

backgroundimage:url(1.jpg),url(2.jpg)

使用逗号把图片分开

注意：原素引入多个大背景图片，前面图片会覆盖后面的图片

background-cilp

定义：指定大背景的绘制区域（裁剪）

语法：

background-cilp：border-box / padding-box / content-box

优点介绍：

border-box：大背景被裁剪到前面板盒（从前面板开始绘制大背景图片）—默认 padding-box：大背景被裁剪到内边距框（从内边距开始绘制大背景图片） content-box：大背景被裁剪到文本框

background-origin

定义：增设大背景图像的原始起始位置

语法：

background-origin：border-box / padding-box / content-box(大背景图片坐标原点与这三个有关系)

优点的介绍：

border-box：相对于前面板来定位 padding-box：相对于内边距来定位 content-box：相对于文本框来定位

另外有一个需要了解

background-position:定义大背景图片的位置，水平与垂直方向上面的偏移量(参考点)

background-repeat

定义：增设是否及如何重复大背景图像，默认地，大背景图像在水平和垂直方向上重复。

优点值：

repeat 默认。大背景图像将在垂直方向和水平方向重复。 repeat-x 大背景图像将在水平方向重复。 repeat-y 大背景图像将在垂直方向重复。 no-repeat 大背景图像将仅显示一次。 inherit 规定应该从父原素继承 background-repeat 优点的增设

background-size

定义：指定大背景图像的大小

语法：

background-size：number / % / cover / contain

优点介绍：

number: 宽度高度（如果只写一个数值，第二个数值默认auto）百分比： 0% – 100% 之间的任何值，此时的百分比参照于原素div的大小 cover：将大背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位 contain：将大背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现

复合优点background

定义：可以在一个声明中增设所有的背景优点

语法：

background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url(1.jpg) ,url(2.jpg)…

2.CSS3蓝紫色

定义：可以在两个或者多个指定颜色之间显示平移的过渡阶段

线性蓝紫色

定义：是沿着一根轴线改变颜色，从起点到终点进行顺序蓝紫色（从一边拉向另一边）

语法：background:linear-gradient(方向，开始颜色，结束颜色)

方向介绍：

1.方向从上到下（默认）

background: linear-gradient(red,blue);

2.方向从左到右

background: linear-gradient(to right,red,blue);

3.对角

background: linear-gradient(to right bottom,red,blue);

4.角度(单位deg)

background: linear-gradient(角度,red,blue);

角度说明：0deg 将创建一个从下到上的蓝紫色，90deg将创建一个从左到右的蓝紫色

颜色结点：默认每个颜色均匀分布

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);

从0%到10%，为红色，从10%到20%为红色到蓝色的蓝紫色，从20%到30%为蓝色到绿色的蓝紫色，从30%到40%，为绿色到黄色的蓝紫色,从40%到100%为黄色

background: linear-gradient(red 10%,blue);

从0%到10%，为红色，从10%到100%为红色到蓝色的蓝紫色

最后如果不写具体数值，默认到100%

background: linear-gradient(red,blue 30%);

从0%到30%，为红色到蓝色的蓝紫色

如果第一个不写，默认数值是 0%

background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));

由透明色变为不透明色

重复蓝紫色

示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

注意：把原素的整体宽度看成100%

径向蓝紫色

定义：从起点到终点，颜色从内向外进行圆形蓝紫色

语法：background:radial-gradient(形状尺寸，开始颜色，结束颜色)

形状分类：

circle — 圆形

ellipse — 椭圆形

注意：当原素的高和宽一样时，参数无论增设哪个，都是圆形

尺寸大小：

closest-side最近边

background: radial-gradient(closest-side circle,red , blue);

farthest-side 最远边

background: radial-gradient(farthest-side circle,red , blue);

closest-corner最近角

background: radial-gradient(closest-corner circle,red , blue);

farthest-corner最远角

background: radial-gradient(farthest-corner circle,red , blue);

颜色结点：

例：

background:radial-gradient(circle,red 50% ,blue 70%);

注意：此时的百分比,指的是圆心到原素最远端的距离（角度）

重复蓝紫色：

示例： background: repeating-radial-gradient(red 0%,blue 20%);

background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

CSS3过渡阶段

定义：允许css的优点值在一定时间区间内平滑的过渡阶段，在鼠标点击，鼠标滑过或对原素任何改变中触发，并圆滑地以动画电影形式改变css的优点值。

优点：

1.transition-property优点

定义：增设对象中的参与过渡阶段的优点

语法：transition-property：none | all | property

参数说明：

none：没有优点改变

all : 默认值，所有优点都改变

property：原素的优点名 width,color等

2.transition-duration优点

定义: 增设对象过渡阶段的持续时间

语法：transition-duration：time

参数说明：

规定完成过渡阶段效果需要花费的时间，以秒或者毫秒计，默认值0

3.transition-timing-function优点

定义：增设对象中过渡阶段的动画电影类型，即规定过渡阶段效果的速度曲线。

该优点允许过渡阶段效果随着时间来改变其速度。

语法：只能使用一个优点值

参数说明：

ease:平滑过渡阶段（0–慢–快–慢），默认值

cubic-bezier(0.25,0.1,0.25,1)

linear:线性过渡阶段（匀速） cubic-bezier(0,0,1,1)

ease-in:慢–快 cubic-bezier(0.42,0,1,1)

ease-out:快–慢 cubic-bezier(0,0,0.58,1)

ease-in-out:慢–快–慢

cubic-bezier(0.42,0,0.58,1)

贝塞尔曲线 :https://cubic-bezier.com/#.17,.67,.83,.67

值linear规定以相同速度开始至结束的过渡阶段效果（等于 cubic-bezier(0,0,1,1)）。ease规定慢速开始，然后变快，然后慢速结束的过渡阶段效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in规定以慢速开始的过渡阶段效果（等于 cubic-bezier(0.42,0,1,1)）。ease-out规定以慢速结束的过渡阶段效果（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out规定以慢速开始和结束的过渡阶段效果（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

亲自试一试 – 实例

实例 1

为了更好地理解不同的函数值，请看上面暗含五个不同值的五个不同的 div 原素：

#div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;} /* Firefox 4: */ #div1 {-moz-transition-timing-function: linear;} #div2 {-moz-transition-timing-function: ease;} #div3 {-moz-transition-timing-function: ease-in;} #div4 {-moz-transition-timing-function: ease-out;} #div5 {-moz-transition-timing-function: ease-in-out;} /* Safari and Chrome: */ #div1 {-webkit-transition-timing-function: linear;} #div2 {-webkit-transition-timing-function: ease;} #div3 {-webkit-transition-timing-function: ease-in;} #div4 {-webkit-transition-timing-function: ease-out;} #div5 {-webkit-transition-timing-function: ease-in-out;} /* Opera: */ #div1 {-o-transition-timing-function: linear;} #div2 {-o-transition-timing-function: ease;} #div3 {-o-transition-timing-function: ease-in;} #div4 {-o-transition-timing-function: ease-out;} #div5 {-o-transition-timing-function: ease-in-out;}

实例 2

与上例相同，但通过 cubic-bezier 来规定速度曲线：

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;} #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Firefox 4: */ #div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Safari and Chrome: */ #div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;} #div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Opera: */ #div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;} #div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

4.transition-delay优点

定义：增设对象延迟的过渡阶段时间

语法：transition-delay：time

参数说明：

指定秒或者毫秒数来延迟动画电影效果的开始，默认是0

5.transition复合优点

语法：

transition ： property duration timing-function delay；

参数说明：过渡阶段时间和延迟时间的顺序不能乱

CSS3转换

定义：让一个原素在一个坐标系统中变形，这个优点包涵一系列的变形函数，可以移动，旋转，缩放原素。

语法：transform：none | <transform-function> 默认值是none

2d转换

1.rotate()旋转

定义：通过指定一个角度参数，对原素指定一个2D的旋转

语法：transform：rotate(angle) 单位deg

参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转

2.translate()平移

定义：根据X轴和Y轴的位置给定参数，使当前原素位置移动

分类：

translateX() 仅水平方向移动

语法：transform：translateX() 单位px

translateY() 仅垂直方向移动

语法：transform：translateY() 单位px

translate(x,y) 水平方向和垂直方向同时移动

语法：transform：translate( X, Y) 单位px

注意：如果只写一个参数，第二个默认是0，也就是只增设了水平方向上的位移

3.scale( )缩放

定义：增设原素的缩放程度

分类：

scaleX( ) 仅水平方向缩放

语法：transform：scaleX() 没有单位

scaleY( ) 仅垂直方向缩放

子主题语法：transform：scaleY() 没有单位

scale(x,y) 使原素水平和垂直方向同时缩放

语法：transform：scale(x,y) 没有单位

4.skew()扭曲/倾斜

定义：增设原素的倾斜状态

分类：

skewX( ) 仅使原素在水平方向上扭曲变形单位deg 正值 —-逆时针

skewY( ) 仅使原素在垂直方向上扭曲变形单位deg 正值 —-顺时针

skew( ) 使原素在水平方向和垂直方向上扭曲变形单位deg

注意：0deg与180deg 效果一样

5.转换基点

定义：原素转换的基准点

语法： transform-origin：水平方向垂直方向

参数说明：

left top 左上角 —-四个角均可以

25% top

50px 50px

默认值：

rotate 几何中心点

skew 几何中心点

scale 几何中心点

translate 本身位置

3d转换

1.开启3d空间transform-style: preserve-3d; 一般给父原素开启

2.子原素增设3d转换效果

rotate

rotateX()

定义：指对象在X轴上的旋转角度（转换基点： 50% 50% 0）

rotateY()

定义：指对象在Y轴上的旋转角度（转换基点： 50% 50% 0）

rotateZ()

定义：指对象在Z轴上的旋转角度（转换基点： 50% 50% 0）

translate

translateZ()

定义：指对象在Z轴上面的平移（转换基点： 50% 50% 0）

scale

scaleZ()

定义：指定对象的Z轴缩放（转换基点： 50% 50% 0）(无太大意义，开启3d空间)

3.增设景深：实现近大远小

父原素子原素都可以增设

父原素：perspective: 300px;

子原素:

transform:perspective(300px) translateZ(-200px);

注意：景深：可选值：大于或等于0,景深值越大，原素看起来越大

默认值: 0 — 没有景深（不能为负值）

4.转换基点

默认值： 50% 50% 0

transform-origin: top; 关键字表示 ( 50% 0 0 )

注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字

5.景深中心点：改变观察者视角

perspective-origin: top;

perspective-origin: top right;

6.原素背面可见还是不可见

backface-visibility:visible ;（默认值：可见）

backface-visibility: hidden; 不可见

CSS3动画电影

定义：使原素从一种式样逐蓝紫色化到另外一种式样的效果

@keyframes

定义：keyframes关键帧，用来决定动画电影变化的关键位置

注意：keyframes 控制关键位置，并不是所有的位置

语法：@keyframes animationname{

keyframes-selector{

cssStyles;

}

animationname：必写项，定义动画电影的名称

keyframes-selector：必写项，动画电影持续时间的百分比 0% – 100%之间，或者使用form和to关键字也可以增设，form代表0%，to代表100%

示例：

@keyframes abc {

from{transform: rotate(0)}

50%{transform:rotate(90deg)}

to{transform: rotate(360deg)}

}

animation优点

1.animation-name优点

增设对象所应用的动画电影名称

语法：

animation-name：keyframename | none

参数说明：

keyframename：指定要绑定到示例的关键帧的动画电影名称

2.animation-duration优点

定义：增设对象动画电影的持续时间

语法：

animation-duration：time

参数说明：指定对象播放完成需要花费的时间，默认值是0

3.animation-timing-function优点

定义：增设对象动画电影的过渡阶段类型，即规定动画电影的速度曲线

速度曲线定义动画电影从一套 CSS 式样变为另一套所用的时间。

速度曲线用于使变化更为平滑。

语法：animation-timing-function: value;

参数说明：与transition-timing-function优点的参数一样

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：值描述linear动画电影从头到尾的速度是相同的。ease默认。动画电影以低速开始，然后加快，在结束前变慢。ease-in动画电影以低速开始。ease-out动画电影以低速结束。ease-in-out动画电影以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

亲自试一试 – 实例

实例 1

为了更好地理解不同的定时函数值，这里提供了增设五个不同值的五个不同的 div 原素：

/* W3C 和 Opera: */ #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} /* Firefox: */ #div1 {-moz-animation-timing-function: linear;} #div2 {-moz-animation-timing-function: ease;} #div3 {-moz-animation-timing-function: ease-in;} #div4 {-moz-animation-timing-function: ease-out;} #div5 {-moz-animation-timing-function: ease-in-out;} /* Safari 和 Chrome: */ #div1 {-webkit-animation-timing-function: linear;} #div2 {-webkit-animation-timing-function: ease;} #div3 {-webkit-animation-timing-function: ease-in;} #div4 {-webkit-animation-timing-function: ease-out;} #div5 {-webkit-animation-timing-function: ease-in-out;}

实例 2

与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：

/* W3C 和 Opera: */ #div1 {animation-timing-function: cubic-bezier(0,0,1,1);} #div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Firefox: */ #div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1);} #div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Safari 和 Chrome: */ #div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);} #div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

4.animation-delay优点

定义：增设动画电影的延迟时间

语法：animation-delay：time

参数说明：可选值，定义动画电影开始前等待的时间，以秒或者毫秒数计数，默认值是0

5.animation-iteration-count优点

定义：增设对象动画电影的循环次数

语法：

animation-iteration-count ： infinite | number

参数说明：

number为数字，其默认值是1

infinite：无限循环次数

6.animation-direction优点

定义：增设对象动画电影是否反向运动

语法：

animation-direction：normal , reverse , alternate , alternate-reverse

参数说明：

normal : 正常方向

reverse :反向运动

alternate ：先正常运动在反向运动，并持续交替运行，需要配合循环优点使用

alternate-reverse ：先反向运动在正常运动，并持续交替运行，需要配合循环优点使用

7.animation-play-state优点

定义：指定对象是否正在运行或已暂停

语法：

animation-play-state：paused | running

参数说明：

paused ：指定暂停动画电影

running : 默认值，制定正在运行的动画电影

示例：鼠标移动到box上暂停动画电影

#box:hover{

animation-play-state: paused;

}

8.animation-fill-mode

增设动画电影结束后的状态

none：默认值。不增设对象动画电影之外的状态，DOM未进行动画电影前状态

forwards：增设对象状态为动画电影结束时的状态，100%或to时，当增设animation-direcdtion为reverse时动画电影结束后显示为keyframes第一帧

backwards：增设对象状态为动画电影开始时的状态,（测试显示DOM未进行动画电影前状态）

both：增设对象状态为动画电影结束或开始的状态，结束时状态优先

9.animation复合优点（不推荐使用）

语法：

animation ： name duration timing-function delay interation-count direction play-state

注意：在css3里面，给原素增设梯形、阴影、转换等优点时，尽管外形位置发生改变，但是原素本身大小和位置不变

——————————————————

CSS3示例

CSS3前面板与梯形

CSS3大背景与蓝紫色

CSS3过渡阶段

CSS3动画电影

相关文章

微信