07 css3新特性

最新推荐文章于 2023-06-25 20:51:27 发布

枫頔

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量146

点赞数

分类专栏： CSS 文章标签： css3新特性过渡动画 2d/3d变形伸缩布局

本文链接：https://blog.csdn.net/fengdi_yuxi/article/details/101034082

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。在CSS3里使用transition属性可以实现补间动画（过渡效果）。

当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式如下：

transition: 过渡的属性  花费时间  运动曲线  延时时间; /* 如果有多组属性变化，还是用逗号隔开。*/

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性	3
transition-property	规定元素过渡的 CSS属性的名称（宽高颜色等等）	3
transition-duration	定义实现过渡效果花费的时间。默认是 0	3
transition-timing-function	规定过渡效果的时间函数（速度曲线）。默认是 “ease”	3
transition-delay	规定过渡效果何时开始，延时时间。默认是 0	3

如果想要所有的属性都变化过渡，写一个all即可：

selector {
    transition: all 0.5s;
}

transition-duration：实现过渡效果花费时间单位是秒(s)、毫秒(ms)
transition-timing-function：过渡效果速度曲线，默认为ease(逐渐变慢)。下面为速度曲线示意图：

2. 2D变换

transform即变换的意思，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

所谓2D变换是指在一个x,y轴组成的平面上进行的变换。

移动

translate(x,y)方法将文字或图像在水平方向和垂直方向上分别垂直指定距离（相对于当前位置），语法如下：

selector {
    transform: translate(x, y); /* translate(x,y):水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）*/
    transform: translateX(x); /* translateX(x):仅水平方向移动（X轴移动）*/
    transform: translateY(y); /* translateY(Y):仅垂直方向移动（Y轴移动）*/
}

注意：

x、y取值可为精确像素值或者百分比值（百分比值是相对于自己来说即自己的百分之几）。
x、y可为负值。

之前说过绝对定位的盒子水平垂直居中，需要left或者top先走父元素的一半，外边距再走自己的负一半。因为此处的移动使用百分比是相对于自己来说的，因此也可实现。

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

缩放

scale(x, y)方法可以对元素进行水平和垂直方向的缩放，语法如下：

selector {
    transform: scale(x, y); /* scale(X,Y):元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）*/
    transform: scaleX(x); /* scaleX(x):元素仅水平方向缩放（X轴缩放）*/
    transform: scaleY(y); /* scaleY(y):元素仅垂直方向缩放（Y轴缩放）*/
}

注意：
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

旋转

rotate(deg)方法可以对元素进行旋转，正值为顺时针，负值为逆时针。语法如下：

selector {
    transform: rotate(deg); /* roatet(deg)使元素旋转）*/
}

倾斜

skew(deg, deg)方法用来设置元素倾斜，语法如下：

selector {
    transform: skew(deg, deg); /* 使元素沿着想x,y轴倾斜 */
    transform: skewX(deg); /* 使元素沿着x轴倾斜 */
    transform: skewY(deg); /* 使元素沿着y轴倾斜 */
}

倾斜角度可为负值，第二个参数不写默认为0。

元素变换中心点

transform-origin属性可以调整元素转换变形的原点（中心点）。

该属性取值如果是四个角，可使用top|left|right|bottom|center等关键字定义；如果想使用精确位置，可使用像素值或者百分比。

selector {
    transform-origin: left top;
    transform: rotate(45deg); 
} 
    /* 改变元素原点到左上角，然后进行顺时旋转45度 */

selector {
    transform-origin: 10px 10px;
    transform: rotate(45deg); 
}  
    /* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */

3. 3D变换

3D变换相对于2D变换只是多了有一个Z轴而已，3D坐标系如下图：

rotateZ(deg)与rotate3d(x,y,z,deg)

rotateZ(deg)：绕着z轴旋转
rotate3d(x,y,z,deg)：定义3D旋转

透视perspective

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理：近大远小。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。

perspective：一般作为一个属性，设置给父元素，作用于所有3D转换的子元素。

理解透视距离原理：

translateZ(z)与translate3d()

translateZ(z)

translateZ(z)表示沿着z轴移动，即垂直于屏幕移动。

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。

比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

translate3d(x,y,z)

translate3d(x,y,z)定义3d移动。

注意：x和y可以是长度值，也可以是百分比(百分比是相对于其本身元素水平方向的宽度和垂直方向的高度)；z只能设置长度值。

backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见，一半用于3d变换有透视的情况下使用。

常用属性：

visible：可见
hidden：隐藏

4. 动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式如下：

animation: 动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

使用动画的前提是定义动画，使用@keyframes定义动画，一半语法如下：

@keyframes 动画名称 {
  from { 
    开始位置（起始位置属性） 
  }  
  to {  
  结束  （结束位置属性）
  } 
}

注意：

除了from to的表示形式外，还可使用百分比代表动画过程（属性变化过程）。（0% x% 100%）
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画

5. 伸缩布局

布局流程

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

确定页面的版心（可视区，版心一半写一个公共类container，定义版心到css初始化中）。

.container {
    width: 1200px;
    margin: 0 auto;
}

分析页面中的行模块，以及每个行模块中的列模块（先行后列）。
制作HTML结构。
CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

/* css初始化常见 */
/*清除内外间距*/
* {
    margin: 0;
    padding: 0;
}
/*去掉列表样式小点*/
ul {
    list-style: none;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after {
    display: table;
    content: "";
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
a {
    /* color: #050505; */
    text-decoration: none;

}
input {
    border: 0;
    box-sizing: border-box;/* css3盒子模型：border和padding都包括到width里面*/
}
/*版心部分宽度相同都要居中定义为一个公共类*/
.container {
    width: 1200px;
    margin: 0 auto;
}

伸缩布局

声明伸缩布局

通过对父元素使用伸缩布局，即通过设置父元素的 display 属性为 display: flex | inline-flex; 其子元素便有了伸缩性，即使在子元素的宽高不确定的情况下，也能通过设置相关css属性来决定子元素的对齐方式、所占比例（占几份）和空间分布。语法如下：

display: flex | inline-flex;

伸缩布局可以对父元素定义min-width:最小宽度；max-width:最大宽度（px）。

伸缩布局示意图：

Flex布局是一整个模块，其中父元素称为flex container，意为容器；子元素称为flex item，意为项目；
Flex布局有两条轴线。主轴：主轴一般是用来配置flex项目的，默认为水平方向（从左到右）；侧轴：默认为垂直方向，从上到下。
主轴的开始位置叫main start，结束位置叫main end；交叉轴的开始位置叫cross start，结束位置叫cross end；
子元素在主轴方向上的大小称为main size，在交叉轴方向上的大小称为cross size。

伸缩布局属性

flex-direction（父元素）

flex-direction 定义了主轴的方向，即项目的排列方向。语法如下：

flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；
row-reverse：主轴在水平方向，起点在右侧；
column：主轴在垂直方向，起点在上沿；
column-reverse: 主轴在垂直方向，起点在下沿。

flex-wrap（父元素）

默认情况下，项目是排成一行显示的，flex-wrap 用来定义当一行放不下时，项目如何换行。语法如下：

flex-wrap: nowrap | wrap | wrap-reverse;

假设此时主轴是从左到右的水平方向：

nowrap（默认）：不换行；
wrap：换行，第一行在上面；
wrap-reverse：换行，第一行在下面。

flex-flow（父元素）

flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。语法如下：

flex-flow: flex-direction  flex-wrap;

justify-content（父元素）

justify-content 定义了项目在主轴上的对齐方式。语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认）：与主轴的起点对齐；
flex-end：与主轴的终点对齐；
center：项目居中对齐；
space-between：两端对齐，项目之间的距离都相等；
space-around：每个项目的两侧间隔相等，所以项目与项目之间的间隔是项目与边框之间间隔的两倍。

align-items（父元素）

align-items定义了项目在侧轴上的对齐方式。语法如下：

align-items: flex-start | flex-end | stretch | center;

stretch(默认)：子元素高度拉伸以适应父容器（子元素不给高度的前提）
flex-start：与侧轴起点对齐；
flex-end：与侧轴终点对齐；
center：项目居中对齐；

align-content（父元素）

align-content 定义了多根轴线的对齐方式，若此时主轴在水平方向，交叉轴在垂直方向，align-content 就可以理解为多行在垂直方向的对齐方式。项目排列只有一行时，该属性不起作用。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行flex-wrap:wrap;这样这个属性的设置才会起作用。

语法如下：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：居中对齐；
space-between：与交叉轴两端对齐，轴线之间的距离相等；
space-around：每根轴线两侧的间隔都相等，所以轴线与轴线之间的间隔是轴线与边框之间间隔的两倍；
stretch（默认值）：如果项目未设置高度或者为 auto，项目将占满整个容器的高度。

order （子项目）

order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前（可为负值）。

order: <integer>;

flex-grow （子项目）

flex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。

如果所有项目的flex-grow都为1，则所有项目平分剩余空间；如果其中某个项目的flex-grow为2，其余项目的 flex-grow为1，则前者占据的剩余空间比其他项目多一倍。（按照当前项目在总份数里面进行分配）

flex-shrink （子项目）

flex-shrink 定义了项目的缩小比例，默认为1，即当空间不足时，项目会自动缩小。

如果所有项目的flex-shrink 都为 1，当空间不足时，所有项目都将等比缩小；如果其中一个项目的 flex-shrink 为 0，其余都为 1，当空间不足时，flex-shrink 为 0 的不缩小。（负值对该属性无效）

flex （子项目）

flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值是 0 1 auto，后两个属性可选。

该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 代表在需要的时候可以拉伸也可以收缩，none 表示既不能拉伸也不能收缩。

枫頔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07 css3新特性

1. 过渡过渡（transition)是CSS3中具有颠覆性的特征之一，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。在CSS3里使用transition属性可以实现补间动画（过渡效果）。当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不...
复制链接

扫一扫