一、渐变
1.线性渐变
linear-gradient(开始位置/角度,起始颜色,终止颜色)
开始位置:渐变开始的位置,属性值可以为百分比,长度,left/right/top/bottom(可组合使用)与to搭配
repeating-linear-gradient:重复的线性渐变
2.径向渐变
radial-gradient(形状,发散方向,起始颜色,终止颜色)
形状:ellipse(椭圆)/circle(圆形)
发散方向:center,left,right,top,bottom(与at搭配)
大小(半径):用像素或关键字表示
closest-side:圆心到距离最近的边
farthest-side:圆心到距离最远的边
closest-corner:圆心到距离最近的角
farthest-corner:圆心到距离最远的角
repeating-radial-gradient:重复的径向渐变
二、动画
1.变形
transform:2D变形
平移:translate(x,y)
第一个值:横向偏移量
第二个值:纵向偏移量
平移之后占位状态不变
旋转:rotate(角度)
deg 度
缩放:scale()
默认为1,小于1就是缩小,大于1就是放大
transform-origin 可改变位置
倾斜:skew(角度)
skewX
skewY
matrix:有六个参数,包含旋转,缩放,移动(平移),倾斜
2.过渡
transition(属性,时间,过度速度,过渡效果何时开始)
-property:属性,一般为all,可以是其他属性名称
-duration:时间,单位时时间单位,一般为秒(s)
-timing-function:过渡速度
linear:匀速
ease:慢 快 慢
ease-in:慢速开始
ease-out:慢速结束
ease-in-out:慢速开始及结束
cubic-bezier(n,n,n,n) 0~1之间
-delay:过渡效果何时开始,默认为0
3.关键帧
格式:
@keyframes 名称{
百分比值{
}
百分比值{
}
...
}
引用时:
animation:名称