css3使用animation属性完成背景颜色动态渐变的效果（附代码）
时间：2024/10/6作者：未知来源：手揣网教程人气：
- [摘要]网站中的背景颜色如果比较单一会显得不够美观，那么，如何让背景颜色多变呢？本篇文章就来给大家介绍使用CSS3动画让我们背景颜色逐渐改变颜色，调整颜色和顺序的组合，使颜色的设计更加醒目。话不多说，让我们...网站中的背景颜色如果比较单一会显得不够美观，那么，如何让背景颜色多变呢？本篇文章就来给大家介绍使用CSS3动画让我们背景颜色逐渐改变颜色，调整颜色和顺序的组合，使颜色的设计更加醒目。
话不多说，让我们来看具体内容（推荐课程：css3视频教程）
首先我们来看一下CSS3关键帧动画的基础知识
让我们先了解逐渐改变元素的动画！在CSS 3 animation属性中，您可以设置关键帧并绘制详细的运动。关于动画的时间和时机、无限的循环，只有CSS就可以指定了！
什么是关键帧？
关键帧（传递点）是在动画中定义更改的帧。我们@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 ...正常方向播放（初始值）
alternate ...在正常和偶数时间以相反方向重新生成奇数次（返回并返回...）
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; }完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> 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; } </style> </head> <body> <p>php中文网</p> </body> </html>效果如下：
以上就是css3使用animation属性实现背景颜色动态渐变的效果（附代码）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
关键词：css3运用animation属性完成背景颜色动态渐变的效果（附代码）