当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

html-day13渐变动画

教程管理员 发布于2023-09-25 12:31 HTML教程 141

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

琼ICP备09004296号-12