day15-css过渡&动画

<!--

    线性渐变的使用

    1.属性:background

    2.属性值:linear-gradient(参数)

    3.关于参数的使用方法:参数有很多个

        - 第一个参数表示方向值,控制渐变是从哪个方向开始变化的

        - 第二个参数表示颜色

        - 第三个参数表示颜色

        - 第四个参数表示颜色...

    4.注意点

        - 线性渐变第一个方向参数是可以省略的,默认的方向是从上到下的

        - 多个参数之间需要使用逗号隔开

 -->

<!--

    径向渐变的属性使用

    1.属性:background

    2.属性值:radial-gradient(起点位置,渐变的形状,渐变的大小,颜色,颜色,颜色...)

    3.注意点

        - 径向渐变只有一种兼容写法

        - 渐变的形状和大小同事存在的时候之间的逗号需要删除 使用空格

 -->

重复渐变属性

    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            /* 重复线性渐变 */
            /* background: repeating-linear-gradient(#000 10%,#fff 20%) */
            /* 重复径向渐变 */
            background: repeating-radial-gradient(#000 5%,#fff 10%);
            border-radius: 50%;
        }
    </style>

<!--

    一:过渡属性的概念:表示元素从初始状态变化到结束状态的过程(存在的,none-block不可以使用)

    二:过渡属性的使用

    1.控制元素属性参与过渡

        - 属性:transition-property(属性)

        - 属性值:

            - 把参与过渡的属性写在后面,如果有多个之间使用空格隔开即可

            - 使用一个英文单词 "all" 表示所有的属性都可以参与过渡

            - 可以不设置属性和属性值,默认所有的属性都可以参与过渡

    2.过渡过程运动的时间

        - 属性:transition-duration(过程)

        - 属性值:s、ms (用户的最佳体验时间是0.8s)

    3.过渡的延迟时间

        - 属性:transition-delay(延迟/延时)

        - 属性值:s、ms

    4.过渡运动方式(默认运动方式ease)

        - 属性:transition-timing-function

        - 属性值

            - ease 逐渐慢下来

            - linear 匀速

            - ease-in 加速

            - ease-out 减速

            - ease-in-out 先加后减

    5.简写方式

        - 属性:transition

        - 属性值:0.8s

 -->

<!--

    一:动画的概念:控制元素简单的运动

    二:动画的使用方法: 创建+调用

    三:动画的创建:动画就像工具,工具需要购买和使用

    1.动画的创建需要使用 @keyframes 自定义动画名字{ 动画的运动方式(单次/多次) }

    2.动画的调用:动画的属性(哪个元素需要运动就给哪个元素设置动画的属性即可)

    四:如何设置动画

    1.需要在css样式表中创建动画

    2.使用"关键字"(保留字) @keyframes

    3.单次运动的设置:from...to

    4.设置动画运动位置的时候属性需要相同,在动画中只要设置了动画的名字和时间就可以控制运动了

    5.多次运动可以使用百分比

    五:动画的调用

    1.animation-name 动画名字

    2.animation-duration 动画运动时间

 -->

拓展：

    <style>
        @keyframes pMove{
            from{ width:0px; }
            to{ width:100%; }
        }
        p{
            /* 为了默认初始宽度为0的时候 文字会被撑的掉下去 */
            white-space: nowrap;
            /* 默认多出去的文本隐藏起来 */
            overflow: hidden;
            /* steps(参数) 参数可以填数字 表示当前这段动画分为多少帧 多少段 */
           animation: pMove 15s steps(100)
        }
    </style>