css – 圣诞灯循环效果

我正在尝试使用CSS -webkit-animation属性创建一些圣诞灯(1月份).

为此,我正在使用此图片:

我试过了:

@-webkit-keyframes lights {
    0% {
        background-position:0px;
    } 100% {
        background-position:0 -69px;
    }
}

#lights {
    width:100%;
    height:69px;
    background:url(https://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
    -webkit-animation: lights 1s infinite;
}

我想要实现的目标:我想不断改变背景位置,看起来灯光正在关闭和打开.

出于某种原因,我的代码不会更改背景位置,并为图像设置动画.

解决方法

您可以考虑使用steps()1来获得所需的效果并调整位置,如下所示.注意初始值,因为0与0 0不同:

@keyframes lights {
    0% {
       /*Two zeros,not one !!*/
       /*[0] is equivalent to [0 50%] and will create a different animation */
        background-position:0 0; 
    } 
    100% {
        background-position:0 -138px;
    }
}

#lights {
    height:69px;
    background:url(https://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
    animation: lights 1s infinite steps(2);
}
<div id="lights"></div>

或者这样做:

@keyframes lights {
    0%,50% {
        background-position:0 0; /*Two zeros,not one !!*/
    } 
    50.1%,100% {
        background-position:0 -69px;
    }
}

#lights {
    height:69px;
    background:url(https://mysterybrand.net/assets/images/new-year/live-drop-gardland.png);
    animation: lights 1s infinite;
}
<div id="lights"></div>

1有关如何使用步骤()的更多详细信息:https://stackoverflow.com/a/51843473/8620333

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...