css 动画、滤镜

1. 触发式动画

只需要规定起始帧和结束帧

（1）参数

过渡动画时间：transition-duration

过渡动画延迟：transition-delay

动画帧速率： transition-timing-function

linear ： 匀速
ease： 慢，快，慢
ease-in  ： 慢 ，快
ease-out： 快，慢
cubic-bezier(a,b,c,d); 贝塞尔曲线

复合样式：属性名 过渡时间 过度动画时间函数 动画延迟时间;

display：none --> display: block 没有动画效果
opacity: 1 --> opacity: 0 有动画效果 轮播淡入淡出效果

div {
    width: 200px;
    height: 200px;
    transition: 1s;
    background-color: pink;
}

div:hover {
    width: 500px;
}

2. 主动式动画

创建动画帧：

@keyframes 动画名称{
    0%{ 样式1 }
    1%{ 样式2 }
    ...
    100%{ 样式 }
}

语法：
animation: name duration timing-function delay iteration-count direction;

参数：

• animation-name：需要绑定的动画名称
• animation-duration：完成动画的时间
• animation-timing-function：动画的速度曲线

linear ： 匀速
ease： 慢，快，慢
ease-in  ： 慢 ，快
ease-out： 快，慢
cubic-bezier(a,b,c,d); 贝塞尔曲线

• animation-delay：动画延迟时间

• animation-iteration-count：动画播放次数

infinite	无限次

animation-direction: 定义动画是否反向播放

reverse  反向(反方向)
alternate 反向(来回方向相反)

animation-play-state: paused； 暂停

body：hover{
    animation-play-state: paused；
}

        div {
            width: 200px;
            height: 200px;
            animation: animate 1s infinite alternate;
            background-color: pink;
        }
        
        @keyframes animate {
            0% {
                width: 200px;
            }
            100% {
                width: 500px;
            }
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vY1T2orA-1657268557298)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a66832797e5d4466b8b00b24d3dcb4bc~tplv-k3u1fbpfcp-zoom-1.image)]

transform

1. 旋转（rotate）

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    /* 三个方向旋转（只写其中一个也可以） */
    transform: rotateZ(45deg) rotateX(deg) rotateY(45deg);
}
/*
rotateX: x轴旋转
rotateY: y轴旋转
*/

2. 位移（translate）

transform :translateX(100px)  translateY(100px)；
transform :translateY(100px)
transform :translateZ(100px)

3. 缩放（scale）

transform：scale（倍数）；/设置元素的缩放倍数/

倍数: 0~1之间, 缩小
倍数 : >1 , 放大

4. 倾斜(skew)

transform：skewX（45deg）

transform：skewY（45deg）

5. 变换基点

transform-origin： left top
方位值改变基点

transform-origin： 0px 0px
元素左上角

filter

1. 亮度

filter: brightness(0.2)
0~1 变暗
大于1 变亮

        div {
            width: 200px;
            height: 200px;
            background: url(./1.jpg) no-repeat center/200px 200px;
            margin: auto;
        }
        
        div:hover {
            filter: brightness(0.2)
        }

2. 对比度

filter：contrast（百分比）；黑的更黑，白的更白

        div:hover {
            filter: contrast(200%)
        }

3. 模糊

filter：blur（模糊半径）；给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

        div:hover {
            filter: blur(10px);
        }

4. 色调

filter：grayscale（）；该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

        div:hover {
            filter: grayscale(100%)
        }

        div:hover {
            filter: sepia(1);
        }