1.背景渐变
1.线性渐变
background:linear-gradient(颜色1,颜色2) 设置普通渐变
background:linear-gradient(颜色1 *%,颜色2 *%) 设置渐变比例
background:linear-gradient(to 方向,颜色1,颜色2) 设置渐变方向
background:linear-gradient(to 方向1 方向2,颜色1,颜色2) 设置对角渐变
background:linear-gradient(*deg,颜色1,颜色2) 设置渐变角度
如果-渐变比例的百分比值是一样的,就会是明确分界的两种颜色哦!
2.径向渐变
background:radial-gradient(颜色1,颜色2); 设置普通渐变
background:radial-gradient(ellipse椭圆或者circle正圆,颜色1,颜色2); 设置普通图形
background:radial-gradient(颜色1 *%,颜色2 *%); 设置渐变比例
3.重复渐变
重复线性渐变 background:repeating-linear-gradient(颜色1 *%,颜色2 *%);
重复径向渐变 background:repeating-radial-gradient(颜色1 *%,颜色2 *%);
2.过渡:让值可以数字化的属性的变化,慢慢进行
语法:
transition:过渡的属性1 执行的时间 延迟的时间 变化的曲线,过渡的属性2 执行的时间 延迟的时间 变化的曲线;
说明:变化的曲线linear代表匀速变化
注意:如果要实现过渡,必须保证属性的属性值是可以数字化的。display属性不能实现渐变
3.动画
1.定义动画
@keyframes 动画名{
0%{
开始状态的样式
}
*%{
中间状态的样式
}
100%{
结束状态的样式
}
}
2.绑定、执行、调用动画
animation:动画名 动画执行时间 延迟时间 执行的次数 变化的曲线 变化的方向;
执行的次数: infinite是无穷次
变化的曲线: linear是线性
变化的方向: alternate是交替方向执行。 【from-to,to-from】
3.设置动画执行的状态
animation-play-state:paused暂停 | running执行;
4.堆叠层次
设置元素再Z轴上的堆叠层次
z-index:数字;
值正负均可,大的覆盖小的;
每个元素默认值为0;
必须给元素设置非静态定位该属性才会生效。