HTML – 移动一张长长的照片,就像用css闪烁一样

概述从图中可以看出,它包括6个部分. 我用40px构建了一个包含这张照片的div 40px. overflow:hidden; 我想为这张照片制作动画,就像它闪烁一样.看起来像：第一部分显示第一部分,第二部分显示第二部分. [要求：请不要让动画像从下到上滑动. ] 这是我的方式,而不是工作. 1.使用关键帧,如20％,40％,60％,80％,100％.添加顶部：-40,-80,…;但看起来我正在滑动图 从图中可以看出,它包括6个部分.
我用40px构建了一个包含这张照片的div 40px.

overflow:hidden;

我想为这张照片制作动画,就像它闪烁一样.看起来像：第一部分显示第一部分,第二部分显示第二部分.
[要求：请不要让动画像从下到上滑动. ]

这是我的方式,而不是工作.
1.使用关键帧,如20％,40％,60％,80％,100％.添加顶部：-40,-80,…;但看起来我正在滑动图片.
希望有人可以帮助我.非常感谢.

解决方法 您可以使用应用于简单CSS3背景动画的steps()函数

http://codepen.io/anon/pen/JoEoPL

HTML

<div>Acquiring signal...</div>

CSS

div {  background-repeat: no-repeat;  background-image: url(http://i.stack.imgur.com/CAIVQ.png);  wIDth: 80px;  height: 80px;  overflow: hIDden;  text-indent: 100%;  white-space: nowrap;  -webkit-animation: blinksignal 6s steps(6,end) infinite;  animation: blinksignal 6s steps(6,end) infinite;}@-webkit-keyframes blinksignal {  0%   { background-position: 0 0 }  100% { background-position: 0 -480px }}@keyframes blinksignal {  0    { background-position: 0 0 }  100% { background-position: 0 -480px }}

从MDN开始

The steps() functional notation defines a step function divIDing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.

总结

以上是内存溢出为你收集整理的HTML – 移动一张长长的照片,就像用css闪烁一样全部内容，希望文章能够帮你解决HTML – 移动一张长长的照片,就像用css闪烁一样所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。