css3动画案例，滤镜的各个使用比较

三岁九年

于 2020-12-17 20:14:49 发布

阅读量240

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/xh0112/article/details/111322005

版权

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS3中的动画原理和滤镜应用。通过@keyframes定义动画，并详细讲解了animation属性的各个参数，如duration、iteration-count、delay等。此外，文章还展示了滤镜的不同效果，包括opacity、grayscale、invert、brightness、saturate、sepia、blur、hue-rotate、contrast和drop-shadow，并比较了滤镜阴影与盒子阴影的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画

通过@keyframs定义动画。
在指定元素中，通过animation属性来调用动画。

定义动画

格式：
@keyframes 动画名{
from{ 初始帧
}
to{
结束帧
}
}
【注】动画名不要起关键词，最好见名知意。
动画的调用：
通过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;
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
animation-play-state 动画运行状态
paused:暂停
running 运行

复合写法

animation: move 1s
动画名称执行时间这两个必须要写在最前面，后面的属性没有顺序，每个属性要用空格隔开。

在这里插入图片描述
这里上面用的复合属性下面用的分解属性，运用效果是一样的。

案例，制作音乐盒

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            left: 50%;
            top: 50%;
            width: 300px;
            height: 300px;
            margin-left: -150px;
            margin-top:-150px;
            background: url("img/hb.png") no-repeat;
            background-size: 300px;
            border-radius: 50%;
            animation: spin 3s infinite linear;
        }
        @keyframes spin {
            to{
                transform: rotate(360deg);
            }
        }
        .box:hover{
            /* 暂停 */
            animation-play-state: paused;
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>