动画

通过@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>

这里制作的一个会旋转的人物头像音乐盒

infinite代表无数次，可以不停的旋转。

滤镜

看下滤镜各个属性的展示效果

这是原图，来对比一下

/* 透明度 */
filter: opacity(25%);

设置透明度

/* 灰度 */
filter: grayscale(50%);

设置灰度。

/* 反色 */
filter: invert(1);

设置翻转颜色。

/* 亮度 0-1 */
filter: brightness(.5);

设置亮度。

/* 饱和度 0-1 */
filter: saturate(60%);

设置饱和度。

/* 褐色 0-1 */
filter: sepia(60%);

设置褐色比例。

/* 模糊 0-1 */
filter: blur(2px);

设置模糊。

/* 色相翻转 deg */
filter: hue-rotate(90deg);

/* 对比度 */
filter: contrast(2)

设置对比度。

/* 阴影 */
filter: drop-shadow(5px 5px 5px #aaa);

设置阴影

滤镜阴影与盒子阴影的对比。

box-shadow: 10px 10px 5px rgb(109, 97, 97);盒子阴影
filter: drop-shadow(10px 10px 5px #aaa);滤镜阴影

示例

直接来看对比效果

css3动画案例，滤镜的各个使用比较相关推荐

html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
css3d动画案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...
css3动画案例—太阳大海跳动
要点: 1.一个动画定义完成之后,任何元素只要调用这个动画的名字,都可以执行这个动画 2.同一个动画,里面的多个效果也是有前后顺序的,注意效果的差别 html代码: <!DOCTYPE html ...
（30）css3动画
一.CSS3动画介绍 css3 中提供了自己的动画制作方法,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 二.CSS3动画制作方式 css3 动画制作分为两步:1.创建 ...
京东css3动画全屏海报_30个免费的CSS3动画片段代码
30个免费的CSS3动画片段代码 Sponsor 对于网页设计师来说,前端代码CSS/HTML不是强项,但有时候也是需要写的.特别是现在流行CSS3动画,学习和了解一些相关知识是必须的. CSS3动画 ...
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3案例分析,CSS3动画/动画库以及案例分析（上）
在这html5遍天下的年代,越来越多的网页也用到了css3的动画效果,这让原本我们静态的页面有了更多的活力.最近也一直在做这方面的页面,有些小小的心得,和诸位分享下. CSS3的动画绝对是很赞的,不仅 ...

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

css动画案例，用案例看出其用法

动画

复合写法

案例，制作音乐盒

滤镜

滤镜阴影与盒子阴影的对比。

css3动画案例，滤镜的各个使用比较相关推荐

最新文章

热门文章