css3中怎么使用animation属性实现背景颜色动态渐变的效果

本篇内容主要讲解“css3中怎么使用animation属性实现背景颜色动态渐变的效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3中怎么使用animation属性实现背景颜色动态渐变的效果”吧!
　　首先我们来看一下CSS3关键帧动画的基础知识
　　什么是关键帧？
　　关键帧(传递点)是在动画中定义更改的帧。我们@keyframes定义元素如何随每个关键帧而变化。为了使动画与其关键帧匹配，您需要将@keyframes规则的名称与为元素指定的animation-name属性的名称相匹配。
　　@keyframes规则的名称声明为“ @keyframes +任意名称 ”。我将写入0％到100％的关键帧信息。0％表示开始动画，100％表示结束时间。0％from，100％可以用to替换。下面的示例是将背景颜色从红色更改为橙色到粉红色的关键框架。@keyframes name {
　　0% { background: red; }
　　50% { background: orange; }
　　100% { background: pink; }
　　}
　　说明：对于Chrome和Safari等WebKit浏览器，需要供应商前缀(-webkit-)。以编写方式编写“ -webkit-keyframes ” ，并在@和关键帧之间编写-webkit-。
　　animation相关属性
　　animation-name(动画名)
　　@keyframes指定中定义的名称。如果未指定此项，则不会执行动画。此外，如果指定的动画名称与任何关键帧都不匹配，则不会执行该关键帧。
　　animation-duration(动画持续时间)
　　通过“秒+ s”指定执行一个动画的时间长度。例如，“5秒”持续5秒。如果为0，则不会执行。即使指定了负值，也会将其视为0。
　　animation-timing-function(动画定时功能)
　　指定动画的时间以及如何继续。您可以通过调整动画进度速度的比例来表达平滑运动。
　　ease(初期値)
　　ease-in
　　ease-out
　　ease-in-out
　　linear
　　animation-delay(动画延迟)
　　读取元素时，从“元素编号+ s”指定“动画开始”的时间。例如，“5秒”持续5秒。初始值0将立即执行。
　　animation-iteration-count(动画迭代计数)
　　指定使用数字重复动画的次数。infinite要指定无限循环，请指定。
　　animation-direction(动画方向)
　　指定重复动画的方向。
　　normal …正常方向播放(初始值)
　　altern免费云主机、域名ate …在正常和偶数时间以相反方向重新生成奇数次(返回并返回…)
　　reverse…向后播放
　　alternate-reverse…反向播放
　　animation-play-state(动画播放状态)
　　指定动画暂停(paused)和播放(running)。但是，似乎没有太多使用。
　　animation-fill-mode(动画填充模式)
　　指定播放动画之前和之后的状态。
　　none(默认值)
　　forwards..播放后保持最后一个关键帧的状态
　　backwards…在播放前应用第一个关键帧的状态
　　both … forwards ……向前和向后都应用
　　属性总结
　　animation属性允许您分别指定每个属性的值，用空格分隔。项目可以省略，但动画名称必须在执行前写入。建议按以下顺序列出。
　　animation-name(动画名)
　　animation-duration(动画持续时间)
　　animation-timing-function(动画定时功能)
　　animation-delay(动画延迟)
　　animation-iteration-count(动画迭代计数)
　　animation-direction(动画方向)
　　animation-fill-mode(动画填充模式)
　　animation-play-state(动画播放状态)body {
　　animation: test 5s ease 1s infinite forwards;
　　}
　　下面我们来看看背景颜色改变的具体内容
　　在了解了基础的知识之后，我们来详细看看具体的实现方法。首先，将关键帧的名称设置为“bg – color”，并将背景颜色设置为从0到100％的过渡。如果将相同的颜色设置为0％和100％，则在循环动画时它会平滑移动。我们还将描述您为基于Webkit的浏览器启用的版本。@-webkit-keyframes bg-color {
　　0% { background-color: #e74c3c; }
　　20% { background-color: #f1c40f; }
　　40% { background-color: #1abc9c; }
　　60% { background-color: #3498db; }
　　80% { background-color: #9b59b6; }
　　100% { background-color: #e74c3c; }
　　}
　　@keyframes bg-color {
　　0% { background-color: #e74c3c; }
　　20% { background-color: #f1c40f; }
　　40% { background-color: #1abc9c; }
　　60% { background-color: #3498db; }
　　80% { background-color: #9b59b6; }
　　100% { background-color: #e74c3c; }
　　}
　　由于此时指定整个网页的背景颜色，body以animation指定属性。值为“关键帧名称”，bg-color“更改”在10秒内添加，“，10s”指定无限循环infinite。不要忘记webkit的版本。background-color让我们指定基本背景颜色作为背景色，为动画不起作用的情况做准备。body {
　　background-color: #e74c3c;
　　animation: bg-color 10s infinite;
　　-webkit-animation: bg-color 10s infinite;
　　}
　　完整代码如下：
　　body {
　　background-color: #e74c3c;
　　animation: bg-color 10s infinite;
　　-webkit-animation: bg-color 10s infinite;
　　}
　　@-webkit-keyframes bg-color {
　　0% { background-color: #e74c3c; }
　　20% { background-color: #f1c40f; }
　　40% { background-color: #1abc9c; }
　　60% { background-color: #3498db; }
　　80% { background-color: #9b59b6; }
　　100% { background-color: #e74c3c; }
　　}
　　@keyframes bg-color {
　　0% { background-color: #e74c3c; }
　　20% { background-color: #f1c40f; }
　　40% { background-color: #1abc9c; }
　　60% { background-color: #3498db; }
　　80% { background-color: #9b59b6; }
　　100% { background-color: #e74c3c; }
　　}
　　p {
　　font-family: Meiryo, “Hiragino Kaku Gothic Pro W3”,sans-serif;
　　text-align: center;
　　margin-top: 150px;
　　color: #fff;
　　}到此，相信大家对“css3中怎么使用animation属性实现背景颜色动态渐变的效果”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: html5是一种新的语言吗

这篇文章主要介绍了html5是一种新的语言吗的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html5是一种新的语言吗文章都会有所收获，下面我们一起来看看吧。 html5不是一种新的语言。HTML（超文本标记语言）是1990年创立的…