1、css的渐变
css的渐变分为两种
线性渐变 重复线性渐变
background:linear-gradient(渐变的方向,渐变的颜色,渐变的颜色)
background:repeating-linear-gradient(渐变的方向,渐变的颜色,渐变的颜色,颜色的占位)
水平或者垂直渐变
标准模式(不加前缀)
to left 从右到左
to right 从左到右
to top 从下到上
to bottom 从上到下
兼容模式(需要加前缀)
left 在左边
right 在右边
top 在上边
bottom 在下边
对角渐变
to left top
to right top
to left bottom
to right bottom
兼容
left top
right top
left bottom
right botton
角度值(单位deg)
标准模式:
正值顺时针
负值逆时针
兼容模式的角度值=90deg-=标准模式的角度值
一个盒子两个颜色:background: linear-gradient(to left, black 50%,green 50%);
注意:渐变的颜色是可以设置百分比的,前面的颜色的百分比可以设置自己的实色占位,和渐变颜色占位,后面颜色只能设置渐变色占位
径向渐变 重复径向渐变
background:-webkit-redial-gradient(渐变的中心点,渐变的形状,渐变的大小,渐变的颜色1,颜色2)
渐变的中心
center
px
%
渐变的形状
正圆 circle
椭圆 ellipse
渐变的大小(和渐变的形状不能同时使用)
怎么设置大小的:
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角
2、过渡动画
在一段时间内容,通过用户的动作设置内容的属性值改变
1、事件触发(用户的动作触发)
2、初始值和最终值
transition:参与过渡的属性 执行时间 延迟时间 速度动画
注意渐变是不参加过渡的但是是两个颜色的话会出现过渡的效果
参与过渡的属性
transition-property:all
执行时间
transition-duration
延迟时间
transition-delay
速度动画
transition-timing-function:
ease 默认
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
2D属性
位移、缩放、旋转、倾斜
变形属性:
transform
1、2D的位移
类似于我们的相对定位,占位,
transform:translate(x,y)
transform:translateX(x)
transform: translateY(y)
2d的缩放(设置的是倍数,默认是中心缩放)
transform:scale(x,y)
transform: scaleX(x)
transform: scaleY(y)
注意:transform:scale(2)是设置x轴y轴都缩放可以设置负值,设置负值是反方向缩放
2d的旋转
transform:rotateX(x) 上下旋转
transform:rotateY(y) 左右旋转
transform:rotate(顺时针逆时针旋转)
2d的倾斜
transform:skew(x,y)
transform:skewX(x)
transform:skewY(y)
注意:transform:skew(20deg)是设置X轴倾斜20deg。
改变变形的中心点
transform-origin
单词方向
px、%