动画 animation
animation:动画名称 花费时间 运动曲线 等待时间 播放次数 是否反方向播放
infinite:循环播放
alternate:反方向播放
animation: move 4s linear infinite alternate;
定义动画
@keyframes move {
from{
left: 0;
background-color: red;
}
to{
left: 800px;
background-color: yellow;
}
}
@keyframes move {
0%{
left: 0;
top: 10px;
background-color: red;
}
50%{
left: 600px;
top:600px;
background-color: yellow;
}
100%{
left: 1000px;
top:10px;
background-color: green;
}
}
线性渐变
linear-gradient(方向,颜色1,颜色2,…)
参数:
1)方向:to top bottom right left ||角度(向上0deg,向右90deg,向下180deg,向左270deg)
2)颜色及位置
background: linear-gradient(to right bottom,red,orange,yellow 5%,green)
径向渐变
radial-gradient(形状,大小,圆心,颜色1,颜色2,…)
形状:circle ellipse(默认)
大小:closest-side farthest-side closest-corner farthest-corner
圆心:center left right top bottom || 数值 (例如:at center left 或者 at 10px 10px )
颜色及位置
background: radial-gradient(circle ,orange,red)
伸缩布局样式属性
给父盒子设置:
display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
flex:1;
flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
flex-direction调整主轴方向(默认为水平方向)
flex-direction: column 垂直排列
flex-direction: row 水平排列
justify-content调整主轴对齐(水平对齐)
- flex-start ------默认值。项目位于容器的开头, 让子元素从父容器的开头开始排序但是盒子顺序不变
- flex-end------让子元素从父容器的后面开始排序但是盒子顺序不变
- center------让子元素在父容器中间显示
- space-between ----左右的盒子贴近父盒子,中间的平均分布空白间距
- space-around -----项目位于各行之前、之间、之后都留有空白的容器内,相当于给每个盒子添加了左右margin外边距
- initial -----设置该属性为它的默认值
- inherit----- 从父元素继承该属性。
align-items调整侧轴对齐(垂直对齐)
- stretch----默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器(子元素不给高度的前提下)
- center-----项目位于容器的中心,垂直居中。
- flex-start-----项目位于容器的开头,垂直对齐开始位置 上对齐。
flex-end-----项目位于容器的结尾,垂直对齐结束位置 底对齐。
flex-wrap控制是否换行
- nowrap----默认值。规定灵活的项目不拆行或不拆列。 不换行,则 收缩(压缩) 显示 强制一行内显示
- wrap------规定灵活的项目在必要的时候拆行或拆列。
- wrap-reverse-----规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序
。