始终以全屏尺寸读取sprite CSS？

本文介绍了始终以全屏尺寸读取sprite CSS？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我尝试为具有自动全屏尺寸的sprite制作动画 但是我不知道该如何始终以全屏方式读取此子画面（即屏幕宽度和高度的100％，并在调整大小时自动调整） 任何想法自动调整精灵大小？ @-moz-keyframes播放{0％{背景-位置：0％; } 100％{背景位置：100％； }} @-webkit-keyframes播放{0％{背景位置：0％; } 100％{背景位置：100％； }} @关键帧播放{0％{背景位置：0％; } 100％{背景位置：100％； }}＃loader {位置：固定； z索引：999999999999；最高：0;左：0；宽度：100％;高度：100％;背景重复：不重复；背景位置：0 0；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）;背景大小：1100％100％；背景重复：不重复； -webkit-animation：播放2s无限步（11）; -moz动画：播放2s无限步（11）； -o动画：播放2s无限步（11）;动画：播放2s无限步（11）；} < ; div id = loader>< / div> 解决方案您快到了！ 应该有 steps（10），因为开始位置不在 BTW， z-index：999999999999 对我来说有点偏执=））。 @keyframes播放{100％{背景位置：100％； }}＃loader {位置：绝对； z索引：9；最高：0;对：0;底部：0;左：0；背景位置：0 0；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）;背景大小：1100％100％；背景重复：不重复；动画：播放1s无限步（10）；} < ; div id = loader>< / div> 更新 问题奖励： @keyframes播放{99.99％{背景位置：120％；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）; } 100％{background-image：none; z索引：-1； }} #loader {位置：固定； z索引：9；最高：0;正确：0；底部：0左：0；背景位置：0 0；背景图片：url（https://image.ibb.co/hCqoYz/preloader_bg_bw2.png）;背景大小：1100％100％；背景重复：不重复；动画：向前播放2s步骤（十二）；} body {背景：url（https://picsum.photos/640/480）50％50％/ cover < div id = loader>< / div> I try to animate a sprite with auto fullscreen sizebut I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing)any idea to autosize sprite ?@-moz-keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; }}@-webkit-keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; }}@keyframes play { 0% { background-position: 0%; } 100% { background-position: 100%; }}#loader{ position: fixed; z-index: 999999999999; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0; background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png); background-size: 1100% 100%; background-repeat: no-repeat; -webkit-animation: play 2s infinite steps(11); -moz-animation: play 2s infinite steps(11); -o-animation: play 2s infinite steps(11); animation: play 2s infinite steps(11);}<div id="loader"></div> 解决方案 You're almost there!There should be steps(10) as the start position is not a step actually.BTW, z-index: 999999999999 looks paranoid to me =)).@keyframes play { 100% { background-position: 100%; }}#loader{ position: absolute; z-index: 9; top: 0; right:0; bottom:0; left: 0; background-position: 0 0; background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png); background-size: 1100% 100%; background-repeat: no-repeat; animation: play 1s infinite steps(10);}<div id="loader"></div>UpdateQuestion bonus:@keyframes play { 99.99% { background-position: 120%; background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png); } 100% { background-image: none; z-index: -1; }}#loader { position: fixed; z-index: 9; top: 0; right: 0; bottom: 0; left: 0; background-position: 0 0; background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png); background-size: 1100% 100%; background-repeat: no-repeat; animation: play 2s steps(12) forwards;}body { background: url(https://picsum.photos/640/480) 50% 50% /cover<div id="loader"></div> 这篇关于始终以全屏尺寸读取sprite CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！