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 表示既不能拉伸也不能收缩。