css 运动背景
原理:
animation-name: bgmove;
animation-duration: 100s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite;
animation介绍:
属性 | 描述 |
---|---|
animation | 指定定义所有动画属性(除了 animation-play-state 外)的速记值。 |
animation-delay | 指定显示动画前动画循环内的偏移(从循环开始的时间量)。 此属性值应采用秒作为单位(后面附加“s”—例如 |
animation-direction | 指定动画循环的播放方向。 将 animation-direction 设置为“正常”"",动画将按预期执行(从属性值 0% 到 100% 执行动画)。将其设置为“反向”""将实现反效果。在多重迭代设置中,值“交替”""和“反向交替”""将导致动画在“正常”""和“反向”""模式间交 替。 |
animation-duration | 指定完成一个动画循环的时间长度。此属性值应采用秒作为单位(后面附加“s”,例如 |
animation-fill-mode | 指定在动画开始播放之前或结束播放之后,动画效果是否可见。此属性定义应用于动画结束时的元素的 CSS 属性。如果将该属性设置为“无”""(初始值),则动画元素将在动画完成后返回到其原始样式属性。将此属性设置为“向前”""值,表示在动画结束时应用动 画的最后值(在“to”或“100%”关键帧中指定的值)。 |
animation-iteration-count | 定义动画循环的播放次数。将此属性设置为“无限”"",将无限期地运行动画。 |
animation-name | 指定一个或多个动画名称。动画名称标识或选择 CSS @keyframes At-Rule。 |
animation-play-state | 指定动画是播放还是暂停。使用此属性,你可以通过将该属性值设置为“已暂停”""来暂停动画,通过将其设置为“正在运行”""来恢复动画。请注意将 已结束的动画的 animation-play-state 重置为“正在运行”"",不会重新启动动画。若要重新启动动画,则必须将其重新添加到元素。 |
animation-timing-function | 指定动画的单次循环期间要使用的中间属性值。 |
body{display: block; background: url('test.png') 5px 5px,url("test.png") 1050px 750px,url("test.png") 1000px -50px; -moz-animation-name: bgmove; -moz-animation-duration: 100s; -moz-animation-timing-function: linear; -moz-animation-delay: 0; -moz-animation-iteration-count: infinite; -webkit-animation-name: bgmove; -webkit-animation-duration: 100s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 0; -webkit-animation-iteration-count: infinite; animation-name: bgmove; animation-duration: 100s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: infinite; } @-moz-keyframes bgmove{ 0%{ background:url('test.png') 5px 5px, url("test.png") 1050px 750px, url("test.png") 1000px -50px; } 100%{ background:url('test.png') 2005px 1005px, url("test.png") 50px -250px, url("test.png") 0 950px; } } @-webkit-keyframes bgmove{ 0%{ background:url('test.png') 5px 5px, url("test.png") 1050px 750px, url("test.png") 1000px -50px; } 100%{ background:url('test.png') 2005px 1005px, url("test.png") 50px -250px, url("test.png") 0 950px; } }