首页 > css教程 > 正文

css3使用animation属性实现背景颜色动态渐变的效果(附代码)

原创 2018-11-08 10:50:53 0 1095
赞助会员专享特权
网站中的背景颜色如果比较单一会显得不够美观,那么,如何让背景颜色多变呢?本篇文章就来给大家介绍使用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>

效果如下:

GIF.gif

以上就是css3使用animation属性实现背景颜色动态渐变的效果(附代码)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:animation属性
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS3中animation属性的使用详解
  • CSS3 Transform、Transition和Animation属性总结
  • 利用animation属性实现循环间的延时执行实例教程
  • 关于CSS中animation属性的使用方法
  • 关于CSS3中动画属性transform和transition以及animation属性的区别分析
  • CSS3制作动画的属性: Animation属性的介绍
  • css3中animation属性实现箭头向右滚动渐隐的代码
  • css3动画之transition和animation属性介绍
  • css3使用animation属性实现背景颜色动态渐变的效果(附代码)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • CSS3  入门教程 CSS3 入门教程
  • CSS3 最新视频教程 CSS3 最新视频教程
  • css3实现网页平滑过渡效果视频教程 css3实现网页平滑过渡效果视频教程
  • Css3入门视频教程 Css3入门视频教程
  • Css3特效效果视频教程 Css3特效效果视频教程
  • CSS3精讲视频教程 CSS3精讲视频教程
  • 相关视频章节