动画+滤镜

动画

之前使用过渡遇到的一些问题：
1.需要重复过渡效果时无法实现
2.只能通过hover等方式才能出发。

动画：

1.通过**@keyframs定义**动画。

2.在指定元素中，通过animation属性来调用动画。

1.定义动画

格式：

        @keyframes 动画名 {
          
           from{
                    /* 初始帧 */
            }
           to{
                    /* 结束帧 */
            }
    }
    

【注】动画名不要起关键字，最好见名知意。

2.动画的调用

通过animation属性来调用动画。

animation-name

动画名称

animation-duration

执行一次动画的完成时间

animation-iteration-count

动画的执行次数
infinite 表示无数次。

animation-delay

动画延迟执行的时间。

animation-fill-mode

• forwards：在动画结束后，盒子保持结束帧状态。
• backwards 在动画开始时，包含延迟时间，让盒子保持初始帧状态
• both backwards forwards都生效
• none(默认值)

animation-direction

动画的执行方式

• alternate：交替执行。
• normal 正常（默认）
  -reverse 反向 从结束帧开始到初始帧结束。

【注】alternate 反向也会算一次执行时间。

animation-timing-function

• linear 匀速
• ease-in 加速
• ease-out 减速
• ease-in-out 先加速后减速

【注】动画属性要有中间状态，一般是数值型。

滤镜

透明度

.item:nth-child(1) img{
            /* 透明度 */
            filter: opacity(65%);
        }

灰度

.item:nth-child(2) img{
            /* 灰度 */
            filter: grayscale(60%);
        }

反色

        .item:nth-child(3) img{
            /* 反色 */
            filter: invert(1);
        }

亮度(0-1)

       .item:nth-child(4) img{
            /* 亮度  0-1 */
            filter: brightness(1.6);
        }

饱和度 (0-1)

        .item:nth-child(5) img{
            /* 饱和度  0-1 */
            filter: saturate(30%);
        }

褐色(0-1)

        .item:nth-child(6) img{
            /* 褐色  0-1 */
            filter: sepia(0.6);
        }

模糊(0-1)

        .item:nth-child(7) img{
            /* 模糊  0-1 */
            filter: blur(2px);
        }

色相翻转(deg)

        .item:nth-child(8) img{
            /* 色相翻转  deg */
            filter: hue-rotate(90deg);
        }

对比度(deg)

        .item:nth-child(9) img{
            /* 对比度 */
            filter: contrast(2)
        }

阴影

        .item:nth-child(10) img{
            /* 阴影 */
            filter: drop-shadow(4px 4px 7px #111);
        }

滤镜阴影与盒子阴影

        .box {
            width: 400px;
            height: 700px;
            position: absolute;
            left: 50%;
            margin-left: -200px;
            top: 50%;
            margin-top: -350px;
        }
        
        .box1,
        .box2 {
            width: 300px;
            height: 200px;
            margin: 50px;
            border: 30px dashed #666;
        }
        
        .box1 {
            /* 盒子阴影 */
            box-shadow: 10px 10px 5px #aaa;
        }
        
        .box2 {
            /* 滤镜阴影 */
            filter: drop-shadow(10px 10px 5px #aaa);
        }

    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>