html-day13渐变动画

简介： html-day13渐变动画

html-day13渐变动画

---

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；
    必须给元素设置非静态定位该属性才会生效。