1.transition 过渡
先做好基本的布局，修改要变化的属性再添加过渡，一般发生hover的时候执行过渡。
三要素 ：有属性发生改变，添加需要过渡的属性，过渡时间
transition-property: margin-left;添加属性
transition-druation;xs过渡时间
transition-timing-function:过渡曲线 linear：ease,ease-in,ease-out,ease-in-out;
连写：transition: property duration timing-function delay;
transition：all 0s 常用
2.动画
三步走:
animation-name 自定义名字
animation-duration 持续时间
@keyframes jh{
form{}
to{}
40%{} 50%{}10%;\
} 定义动画内容
animation-fill-mode:forwards/backward/both 改变前的状态/改变后的状态/结合
animation-play-state: paused/running; 暂停/开始
连写： animation：jh 2s linear 0s infiniter normal/alternote;
3.维度
transform：translate（x,y）:控制水平垂直方向的平移量
transform:rotate(x,y,z)控制旋转轴角度，默认z轴，
transform:scale(x,x)控制缩放，x<1.0 缩小 x>1.0放大
3D:
transform-style:flat 默认元素 2d
设置transform-style设置为preserve-3d,变成3D
制作立方体：
transform: rotate(0deg) translateZ(100px) scaleX(2);
transform: rotateX(90deg) translateZ(100px) scaleX(2);
transform: rotateX(180deg) translateZ(100px) scaleX(2);
transform: rotateY(270deg) translateZ(100px) scale(2);
transform: rotateY(90deg) translateZ(200px);
transform: rotateY(270deg) translateZ(200px);
执行动画：
@keyframes{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
立方体 变成长方体 上下 前后 scaleX(2)放大两倍，左右宽度增加到200.
background 背景
1.background-size
取值:前面宽后面高
background-size:contain;
固定像素: 指定多少就是多少, 例如:background-size:100px 100px;
百分比: 指定多少就是多少, 例如:background-size:50% 20%;
auto: 如果宽度是auto, 那么就等比拉伸宽度. 如果高度是auto,那么久等比拉伸高度
conver: 等比拉伸图片, 保证图片的宽度"和"高度都填满盒子
contain: 等比拉伸图片, 保证图片的宽度"或"高度填满盒子
2.background-origin
图片裁剪
background-origin:content-box
border-box: 背景图片从border开始绘制
padding-box: 背景图片从padding开始绘制, 默认
content-box: 背景图片从content开始绘制
3.background-clip
背景裁剪 background-clip: content-box;
取值：
border-box: 盒子的所有背景都需要显示
padding-box: 盒子padding和content的部分背景需要显示
content-box: 盒子content部分的背景需要显示
4多背景图片
background: url("xxx.png") left top no-repeat,
url("xxx.png") right top no-repeat;
background-image: url("xxx.png"),url("xxxx.png");
background-repeat:no-repeat, no-repeat;
background-position: left top, right top;
网友评论