CSS3新特性（二）

最新推荐文章于 2022-12-30 21:00:00 发布

原创最新推荐文章于 2022-12-30 21:00:00 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #CSS #CSS3新特性 #前端开发

前端开发专栏收录该内容

76 篇文章

订阅专栏

一.CSS3 2D 转换：

1.通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

2.transform转换：

转换是使元素改变形状、尺寸和位置的一种效果

3. 2D 转换方法：

translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

scale()：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

skew()：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

matrix()：matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

4.transform-origin：

允许你改变被转换元素的位置

5. 2D Transform 方法：

matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵

translate(x,y)：定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n)：定义 2D 转换，沿着 X 轴移动元素

scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度

scaleX(n)：定义 2D 缩放转换，改变元素的宽度

rotate(angle)：定义 2D 旋转，在参数中规定角度

skew(x-angle,y-angle)：定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle)：定义 2D 倾斜转换，沿着 X 轴

二.CSS3 3D 转换：

1.使用 3D 转换来对元素进行格式化

2. 3D 转换方法：

rotateX()：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY()：通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

3.实例代码：

	div
	{
		transform: rotateX(120deg);
		-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
		-moz-transform: rotateX(120deg);	/* Firefox */
	}

4.转换属性：

transform：向元素应用 2D 或 3D 转换

transform-origin：允许你改变被转换元素的位置

transform-style：规定被嵌套元素如何在 3D 空间中显示

perspective：规定 3D 元素的透视效果

perspective-origin：规定 3D 元素的底部位置

backface-visibility:定义元素在不面对屏幕时是否可见

5. 3D Transform 方法：

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵

translate3d(x,y,z)：定义 3D 转化

scale3d(x,y,z)：定义 3D 缩放转换

rotate3d(x,y,z,angle)：定义 3D 旋转

perspective(n)：定义 3D 转换元素的透视视图

三.CSS3 过渡:

1.不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

2.要实现这过渡，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

代码实例：

		div
		{
			transition: width 2s;
			-moz-transition: width 2s;	/* Firefox 4 */
			-webkit-transition: width 2s;	/* Safari 和 Chrome */
			-o-transition: width 2s;	/* Opera */
		}

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时

3.transition实现

4.如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开

代码实例：

		div
		{
			transition: width 2s, height 2s, transform 2s;
			-moz-transition: width 2s, height 2s, -moz-transform 2s;
			-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
			-o-transition: width 2s, height 2s,-o-transform 2s;
		}

5.过渡属性：

transition：简写属性，用于在一个属性中设置四个过渡属性

transition-property：规定应用过渡的 CSS 属性的名称

transition-duration：定义过渡效果花费的时间。默认是 0。

transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”

transition-delay：规定过渡效果何时开始。默认是 0。

6.代码实例：

	div
	{
		transition: width 1s linear 2s;
		/* Firefox 4 */
		-moz-transition:width 1s linear 2s;
		/* Safari and Chrome */
		-webkit-transition:width 1s linear 2s;
		/* Opera */
		-o-transition:width 1s linear 2s;
	}

四.CSS3动画：

1.@keyframes 规则：

（1）@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

（2）代码实例：

		@keyframes myfirst
		{
			from {background: red;}
			to {background: yellow;}
		}

2.CSS3 动画：

（1）当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

（2）通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

把 “myfirst” 动画捆绑到 div 元素，时长：5 秒

		div
		{
			animation: myfirst 5s;
		}

（3）动画是使元素从一种样式逐渐变化为另一种样式的效果

（4）用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成

（5）代码实例：

		@keyframes myfirst
		{
			0%   {background: red;}
			25%  {background: yellow;}
			50%  {background: blue;}
			100% {background: green;}
		}

3.CSS3 动画属性：

（1）@keyframes：规定动画

（2）animation：所有动画属性的简写属性，除了 animation-play-state 属性

（3）animation-name：规定 @keyframes 动画的名称

（4）animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0

（5）animation-timing-function：规定动画的速度曲线。默认是 “ease”

（6）animation-delay：规定动画何时开始。默认是 0

（7）animation-iteration-count：规定动画被播放的次数。默认是 1

（8）animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”

（9）animation-play-state：规定动画是否正在运行或暂停。默认是 “running”

（10）animation-fill-mode：规定对象动画时间之外的状态

4.代码实例：

	div
	{
		animation: myfirst 5s linear 2s infinite alternate;
	}

五.CSS3 多列：

1.创建多个列来对文本进行布局 - 就像报纸那样

2.多列属性：

（1）column-count：规定元素应该被分隔的列数

（2）column-gap：属性规定列之间的间隔

（3）column-rule：设置列之间的宽度、样式和颜色规则

3.新的多列属性：

（1）column-count 规定元素应该被分隔的列数

（2）column-fill 规定如何填充列

（3）column-gap 规定列之间的间隔

（4）column-rule 设置所有 column-rule-* 属性的简写属

（5）column-rule-color 规定列之间规则的颜色

（6）column-rule-style 规定列之间规则的样式

（7）column-rule-width 规定列之间规则的宽度

（8）column-span 规定元素应该横跨的列数

（9）column-width 规定列的宽度

（10）columns 规定设置 column-width 和 column-count 的简写属性

六.CSS3 用户界面：

1.新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓

2.用户界面属性：

（1）resize：规定是否可由用户调整元素尺寸

（2）box-sizing：box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

（3）outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

3.新的用户界面属性：

（1）appearance 允许您将元素设置为标准用户界面元素的外观

（2）box-sizing 允许您以确切的方式定义适应某个区域的具体内容

（3）icon 为创作者提供使用图标化等价物来设置元素样式的能力

（4）nav-down 规定在使用 arrow-down 导航键时向何处导航

（5）nav-index 设置元素的 tab 键控制次序

（6）nav-left 规定在使用 arrow-left 导航键时向何处导航

（7）nav-right 规定在使用 arrow-right 导航键时向何处导航

（8）nav-up 规定在使用 arrow-up 导航键时向何处导航

（9）outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

（10）resize 规定是否可由用户对元素的尺寸进行调整