一、过渡属性
过渡:transition
属性值:
- transition-property:all(默认,代表所有变化的属性都发生一个过渡效果);(要执行过渡的属性)
- 如transition-property:width/height等;
- transition-duration;(要执行过渡的时间)
- transition-timing-function;(要执行过渡的时间函数 即过渡效果)
- ease,先快后慢
- ease-in,先慢后快
- ease-out,先快后慢
- ease-in-out,开始与结束慢,中间快
- linear,匀速(常用)
- transition-delay ;(过渡的延时等待)
简写:
transition:过渡属性 过渡时间 过渡效果 过渡等待;
支持多个属性,如果要执行多个属性的过渡,需要在过渡属性值的中间用**逗号**隔开。
transition-property: width, height;
transition-duration: 2s, 1s;
transition-timing-function: linear, ease-out;
transition-delay: 1s, 2s;
同理,以上代码也可以简写:
transition: width 2s linear 1s , height 1s ease-out 2s;
不能执行过渡的属性
- display
- visibility
- float
- position
- z-index
- text-*
- font-*除font-size外,其他都不能执行过渡
二、变幻属性
变幻:transform
指元素在水平方向,垂直方向或Z轴方向进行大小,方向,角度的转变。
属性值:
-
translate 位移
- translate-X 沿着x轴进行位移
- translate-Y 沿着y轴进行位移
- translate-Z 沿着z轴进行位移(需开启3d空间)
可简写:translate(横坐标,纵坐标)
translate3d(横坐标,纵坐标,z轴坐标)
-
scale 缩放
(在不改变width/height的值的情况下,可以将元素整体放大或缩小)
-
scaleX
-
scaleY
可简写:scale(X轴缩放,Y轴缩放)
-
-
rotate 旋转
-
rotateX()
-
rotateY()
-
rotateZ()
单位:deg/turn(turn代表圈数)
-
-
skew 倾斜
- skewX(度数)
- skewY(度数)
开启3D转换
-
perspective:数值(如200px);
添加3D视距【元素本身并不是3D,只是看起来在一直3D的空间里面】
在其外层元素添加属性
perspective
,数值越大透视效果越不显示,数值越小,透视效果越明显 -
transform-style:preserve-3d;
自已形成Z轴的距离【元素本身形成了一个3D元素】
在其父级的元素添加属性
transform-style:preserve-3d
。添加这个属性,外层的元素就会形成一立体包裹空间,内部的元素就可以自己根据需求形成一个Z轴的高度
transform-origin
设置变换起点位置;
- 如果是X轴的变换,我们可以设置
top/bottom/cener
; - 如果是沿着Y轴去发生变换,我们可以设置
left/right/center
; - 如果是沿着Z轴变换,我们可以设置两个属性值如
transform-origin:left top
;
一个元素多个变幻的结合
多个变换值之间使用**空格**来进行隔开
transform: translateX(200px) translateY(150px) scale(1.5) rotateZ(45deg);
关于网页兼容的一些前置
- 谷歌:-webkit-,如-webkit-transform,-webkit-transition
- 微软ie:-ms-
- 火狐:-moz-
- 欧鹏:-o-
三、动画属性
animation
定义:
@keyframes 动画名称{
from{
/*css代码*/
}
to{
/*css代码*/
}
}
@keyframes 动画名称{
0%{}
10%{}
20%{}
50%{}
75%{}
100%{}
}
@keyframes imgBoxAni{
/*动画第1阶段*/
0%,24%{
left: 0px;
}
/*动画第2阶段*/
25%,49%{
left: -440px;
}
/*动画第3阶段*/
50%,74%{
left: -880px;
}
/*动画第4阶段*/
75%,100%{
left: -1320px;
}
}
动画的调用
属性:
- animation-name
- animation-duration
- animation-iteration-count(运行执行的次数,默认是1,如果要使动画一行执行,则需要设置属性来
infinite
,这个值代表无穷大【默认值1】) - animation-timing-function(默认值ease)
- animation-delay(默认值0s)
- animation-direction(设置动画的方向)
- normal 正常方向【默认值】
- reverse 反转
- alternate 正反交替运行
- alternate-reverse 反正交替运行
- animation-play-state(动画的播放状态)
- running 运行状态
- paused
- animation-fill-mode(动画在停止的时候最后一帧的状态)
- backwards 返回到开始状态【默认值】
- forwards 停留在结束状态
- both backwards和forwards的结合体
简写:
animation:动画名称 动画时间 动画次数 动画时间函数 动画等待 动画方向 动画播放状态 动画结束状态
名称和时间为必需值
一个元素使用多个动画
animation: 动画1 时间1 , 动画2 时间2.....;
时间可以使用steps()来完成
四、渐变属性
1.线性渐变
div{
/* 标准写法 */
background-image: linear-gradient(to right,blue,green,red);
/* 兼容性写法 */
background-image: -webkit-linear-gradient(right,blue,green,red);
}/*标准写法与兼容写法有区别,兼容性写法里面是没有`to`的关键字,同时它们的颜色相反*/
linear-gradient
代表线性渐变to 方向
代表沿着某一个方向发生渐变,它可以使用left/right/top/bottom
来设置方向。如to right
,to left top
,to right bottom
等- 方向的后面跟不同的颜色值,不同的颜色值之间使用逗号进行隔开
还可以设置颜色所占的位置:
.div1{
background-image: linear-gradient(to right,red 50%,blue 70%,green 100%);
}/*只需要在每个颜色的后边给这个颜色相应的**结束位置**就可以了*/
或
.b{
background: linear-gradient(to right,red 0% 30%,blue 30% 50%,green 50% 100%);
}
to right
代表方向是向右red 0% 30%
代表红色从0%的地方开始,到30%的地方结束blue 30% 50%
代蓝色从30%的地方开始,到50%的地方结束green 50% 100%
代表绿色从50%的地方开始,到100%的地方结束
方向可以写to right top等或角度,如45deg等
2.径向渐变
径向渐变指的是由内部外进行一个颜色的渐变,它使用的是
radial-gradient
语法格式:
.div1{
/*标准写法*/
background-image:radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
/*兼容性写法*/
background-image:-webkit-radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
}
渐变形状分为椭圆ellipse和圆形circle
渐变的起点位置
在设置径向渐变的时候,一般情况下它会是从正中心的位置开始,由内向外开始进行渐变,但是我们可以设置这个渐变的起点位置,如下所示
background-image: radial-gradient(circle at 100px 100px,red,blue,yellow);
重复的径向渐变
如果渐变色不能填满整个盒子的时候,就会重复进行,它的属性值也是在前面添加
repeating
.a{
background: repeating-radial-gradient(red 0% 10%,blue 10% 20%,lightseagreen 20% 30%);
}
3.圆锥渐变
conic-gradient
**小技巧:**在圆锥渐变里面,如果将开始渐变的颜色与结束渐变的颜色设置为同一个颜色,这样就会形成一个无缝衔接
五、弹性盒子
弹性盒子是一种特殊的布局方式,它的主要应用点是在于移动端,以弹性布局为主体的布局规范我们叫弹性布局。
属性
-
display:flex 设置该属性后盒子会排列在一行上
-
flex-direction:设置弹性的方向
- row 横轴
- row-reverse 横轴反转
- column 纵轴
- column-reverse 纵轴反转
-
justify-content 设置主轴上面的排列方式
flex-start
弹性开始的地方flex-end
弹性结束的地方center
居中space-between
使用空间撑开元素到两边space-around
空间环绕space-evenly
每个元素的空间均匀分布
-
align-items 设置副轴上的排列方式
flex-start
弹性开始的地方flex-end
弹性结束的地方center
居中baseline
文字基线对齐stretch
拉伸【默认值】
-
flex-wrap 当内部元素在株洲傻瓜排列不下的时候设置换行
nowrap
不换行【默认值】wrap
换行wrap-reverse
换行,但是要翻转方向
-
flex-flow 综合属性 即flex-direction和flex-wrap的结合体
-
flex-flow:row wrap; /*主轴为row 并且换行*/ flex-flow:column nowrap; /*主轴为column 并且不换行*/
-
-
align-content 多主轴设置,用于换行后设置多主轴的排列,即副轴上主轴的排列
flex-start
flex-end
center
space-between
space-around
space-evenly
-
align-self 用于子元素设置自身在纵轴上的排列位置,属性值与align-items一样
-
flex :数值 代表当前元素占弹性盒子剩下主轴空间的百分比,我们经常会使用它进行弹性切割,auto、none、initial;
flex: flex-grow flex-shrink flex-basis;
上面的flex:1代表占用剩下空间的百分比
单值语法:值必须为以下其中之一:
- 一个无单位数:它会被当作flex:1 0;的值被假定为1,然后的值被假定为0;
- 一个有效的宽度值:它会被当作的值;
- 关键字none,auto或initial。
双值语法:第一个值必须为一个无单位数,并且它会被当作的值。第二个值必须为以下之一:
- 一个无单位数:的值
- 一个有效的宽度值:的值
三值语法:
- 第一个值必须为一个无单位数:flex-grow;
- 第二个值必须为一个无单位数:flex-shrink;
- 第三个值必须为一个无单位数:flex-basis;
-
flex-grow:放大;将盒子剩余的空间进行分配放大
-
flex-shrink:缩小;0为不缩小,1为默认值
-
flex-basis:设置元素在没被分配前占主轴空间的大小
-
order
用于弹性盒子内部元素的排序,默认值都是0,值越大,越在弹性的结束的地方
弹性盒子的影响
对自身的影响
- 一个盒子变成弹性盒子以后, 内部会多两根轴,元素沿主轴方向排列
- 内部的
<br>
是不能实现的换行,即使在主轴上面排列不下了,也不换行,它会压缩内部的子元素 - 弹性盒子在主轴方向设置
overflow
是没有效果的 - 弹性盒子自身会形成一个
BFC
,它不会有margin
穿透的现象存在
对子元素的影响
- 弹性盒子内部子级元素无视元素类型,所以元素都变成了
block
块级元素 - 弹性盒子内部的子级元素宽度主轴大小会丢失(宽度丢失),副轴会拉伸,但是仍然可以通过
width/height
去设置宽度与高度 - 弹性盒子内部的子元素仍然可以使用定位,但是就是不能使用浮动
六、视口viewport
视口指的是网的展示窗口叫viewport
,我们在进行移动端的网页开发之前,一定要设置视口。
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,mininum-scale=1.0,maxinum=1.0">
width=device-width
设置视口的宽度与设备的宽度相同initial-scale-1.0
设置初始缩放1.0user-scalable=no
设置不允许用户缩放mininum-scale
设置最小缩放maxinum-scale
设置最大缩放
七、媒体查询
媒体查询@media
@media only screen and (max-width:宽度) and (min-width:宽度) {
}
屏幕范围划分
根据bootstrap这个框架的屏幕划分来得到的(因为现在大多数框架都是根据这个范围来划分)
0px~767px
手机(小屏幕)768px~991px
平板992px~1199px
PC设备1200px
及以上 大型PC