我想知道是否可以仅使用 CSS3 功能在 div 内从左到右无休止地进行渐变移动？不需要支持所有浏览器，我只是想尝试一下。
示例是蓝色进度条顶部的闪亮效果。举一个例子表示赞赏。
使用这个CSS你可以让渐变无限移动（基于link http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/在迈克尔的评论中）：
.bar {
background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat;
-webkit-background-size: 50% 100%;
-webkit-animation-name: moving-gradient;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes moving-gradient {
0% {
background-position: left bottom;
}
100% {
background-position: right bottom;
}
}
Demo: http://jsfiddle.net/jhogervorst/X78qN/2/ http://jsfiddle.net/jhogervorst/X78qN/2/
这只适用于基于 WebKit 的浏览器（例如 Safari 和 Chrome）。要使其在其他浏览器中也能工作，请参阅迈克尔的链接 http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient-and-background-cliptext/并复制更多 CSS。
Edit:我必须让它变得完美。请参阅新的演示，了解 CSS3 中近乎完美的 Windows 进度条:)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
