我正在尝试使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。