[英]CSS3 sliding gradient animation - how it works
Following code produces sliding gradient animation without any line of javascript code: 以下代码无需任何JavaScript代码即可生成滑动渐变动画:
html { height: 100% } body { height: 100%; margin: 0 } @keyframes loading { from { background-position: -5000% 0, 0 0 } to { background-position: 5000% 0, 0 0 } } .skeleton { height: 100%; animation-name: loading; animation-duration: 1.5s; animation-iteration-count: infinite; background-color: #fff; background-repeat: no-repeat; background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(#e5e5e5 100%, transparent 0); background-size: 99% 100%; }
<div class="skeleton"></div>
I experimented with some properties and still do not understand how it works. 我尝试了一些属性,但仍然不了解它是如何工作的。 Especially, when background-size: 99% 100%;
特别是background-size: 99% 100%;
is changed to background-size: 100% 100%;
更改为background-size: 100% 100%;
animation slides in opposite direction! 动画向相反方向滑动!
Could you explain it? 你能解释一下吗?
I don't know what's your browser and its version. 我不知道您的浏览器及其版本是什么。 But on my computer, if background-size: 100% 100%
then the animation will be stop. 但是在我的计算机上,如果background-size: 100% 100%
则动画将停止。 (Actually, the background-position
will be ignored) (实际上, background-position
将被忽略)
The idea of this trick is moving background-image
(linear-gradient) by background-position
. 这个技巧的想法是通过background-position
移动background-image
(线性渐变)。 (Check the comment in code below for detail) (有关详细信息,请参见下面的代码中的注释)
About your second question, you should refer this answer CSS background-position ignored when using background-size . 关于您的第二个问题, 在使用background-size时 ,应将此答案CSS忽略背景位置 。 A quick summary, you can't use percent for background-position
if background-size
reaches to 100%. 快速总结,如果background-size
达到100%,则不能使用百分比表示background-position
。 This happens because the image in background has no space to move. 发生这种情况是因为背景中的图像没有移动空间。
If you insist to use background-size
with 100%. 如果您坚持使用100%的background-size
。 I afraid you have to use absolute values. 恐怕您必须使用绝对值。
BTW, I've upgraded the code. 顺便说一句,我已经升级了代码。 Now it looks better. 现在看起来更好。
html { height: 100% } body { height: 100%; margin: 0 } @keyframes loading {/* original code */ from {/* This is the position of image of the first frame */ background-position: -5000% 0, 0 0 } to {/* This is the pos of img of the last frame */ background-position: 5000% 0, 0 0 } } @keyframes betterLoading { 0% {/* This is the position of image of the first frame */ background-position: -5000% 0, 0 0 } 50% { /* This is the pos of img of a frame in the middle happening animation */ /* If duration is 1s then the pos below will be at 0.5s */ background-position: 5000% 0, 0 0 } 100% {/* This is the pos of img of the last frame */ background-position: -5000% 0, 0 0 } } .skeleton { height: 100%; animation-name: betterLoading; animation-duration: 1.5s; animation-iteration-count: infinite; background-color: #fff; background-repeat: no-repeat; background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(green 100%, transparent 0); background-size: 99% 100%, cover; }
<div class="skeleton"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.