在CSS中移动渐变栏 [英] Moving Gradient Bar in CSS

查看：78
本文介绍了在CSS中移动渐变栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要一个彩色的酒吧，另一种颜色移动通过这个酒吧。它应该看起来像这样，白色部分移动：





我正在考虑使用渐变和CSS 3的anmiation属性。我不想使用JS ！
我试过这样：



HTML：

 < body> 
< div class =navbar_line>< / div> 
< / body>

CSS：

 code> .navbar_line {
 animation：gradient 5s linear infinite; 
} 
 @ -webkit-keyframes gradient 
 {
 
 0％{
 background：-moz-linear-gradient（left，#FFFFFF 0％ ，#EEFFEE 1％，#DDFFDD 2％，#BBFFBB 4％，#AAFFAA 5％，＃99FF99 6％，＃88FF88 7％，＃77FF77 8％，＃66EF66 9％，＃55DF55 10％，＃44CE44 11％ ，＃33BD33 12％，＃22AC22 13％，＃119B11 14％，＃008A00 15％，＃008A00 86％，＃119B11 87％，＃22AC22 88％，＃33BD33 89％，＃44CE44 90％ ，＃66EF66 92％，＃77FF77 93％，＃88FF88 94％，＃99FF99 95％，#AAFFAA 96％，#BBFFBB 97％，#CCFFCC 98％，#DDFFDD99％，#EEFFEE 100％ / * FF3.6 + * / 
 background：-webkit-linear-gradient（，#FFFFFF 0％，#EEFFEE 1％，#DDFFDD 2％，#BBFFBB 4％，#AAFFAA 5％，＃99FF99 6 ％，＃88FF88 7％，＃77FF77 8％，＃66EF66 9％，＃55DF55 10％，＃44CE44 11％，＃33BD33 12％，＃22AC22 13％，＃119B11 14％，＃008A00 15％，＃008A00 86 ％＃119B11 87％，＃22AC22 88％，＃33BD33 89％，＃44CE44 90％，＃55DF55 91％，＃66EF66 92％，＃77FF77 93％，＃88FF88 94％，＃99FF99 95％ ％，#BBFFBB 97％，#CCFFCC 98％，#DDFFDD 99％，#EEFFEE 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（left，#FFFFFF 0％，#EEFFEE 1％，#DDFFDD 2％，#BBFFBB 4％，#AAFFAA 5％ ＃99FF99 6％，＃88FF88 7％，＃77FF77 8％，＃66EF66 9％，＃55DF55 10％，＃44CE44 11％，＃33BD33 12％，＃22AC22 13％，＃119B11 14％，＃008A00 15％ ＃008A00 86％，＃119B11 87％，＃22AC22 88％，＃33BD33 89％，＃44CE44 90％，＃55DF55 91％，＃66EF66 92％，＃77FF77 93％，＃88FF8894％，＃99FF9995％ #AAFFAA 96％，#BBFFBB 97％，#CCFFCC 98％，#DDFFDD 99％，#EEFFEE 100％）; / * Opera 11.10+ * / 
 background：-ms-linear-gradient（left，#FFFFFF 0％，#EEFFEE 1％，#DDFFDD 2％，#BBFFBB 4％，#AAFFAA 5％，＃99FF99 6 ％，＃88FF88 7％，＃77FF77 8％，＃66EF66 9％，＃55DF55 10％，＃44CE44 11％，＃33BD33 12％，＃22AC22 13％，＃119B11 14％，＃008A00 15％，＃008A00 86 ％＃119B11 87％，＃22AC22 88％，＃33BD33 89％，＃44CE44 90％，＃55DF55 91％，＃66EF66 92％，＃77FF77 93％，＃88FF88 94％，＃99FF99 95％ ％，#BBFFBB 97％，#CCFFCC 98％，#DDFFDD 99％，#EEFFEE 100％）; / * IE10 + * / 
 background：linear-gradient（to right，#FFFFFF 0％，#EEFFEE 1％，#DDFFDD 2％，#BBFFBB 4％，#AAFFAA 5％，＃99FF99 6％，＃88FF88 7％，＃77FF77 8％，＃66EF66 9％，＃55DF55 10％，＃44CE44 11％，＃33BD33 12％，＃22AC22 13％，＃119B11 14％，＃008A00 15％，＃008A00 86％，＃119B11 87％，＃22AC22 88％，＃33BD33 89％，＃44CE44 90％，＃55DF55 91％，＃66EF66 92％，＃77FF77 93％，＃88FF8894％，＃99FF99 95％，#AAFFAA 96％，#BBFFBB 97％，#CCFFCC 98％，#DDFFDD 99％，#EEFFEE 100％）; / * W3C * / 
} 
 
 1％{
 background：-moz-linear-gradient（left，#EEFFEE 0％，#FFFFFF 1％，#EEFFEE 2％ ，#DDFFDD 3％，#BBFFBB 5％，#AAFFAA 6％，＃99FF99 7％，＃88FF88 8％，＃77FF77 9％，＃66EF66 10％，＃55DF55 11％，＃44CE44 12％，＃33BD33 13％ ，＃22AC22 14％，＃119B11 15％，＃008A00 16％，＃008A00 87％，＃119B11 88％，＃22AC22 89％，＃33BD33 90％，＃44CE44 91％，＃55DF55 92％ ，＃77FF77 94％，＃88FF88 95％，＃99FF99 96％，#AAFFAA 97％，#BBFFBB 98％，#CCFFCC99％，#DDFFDD 100％）。 / * FF3.6 + * / 
 background：-webkit-linear-gradient（，#EEFFEE 0％，#FFFFFF 1％，#EEFFEE 2％，#DDFFDD 3％，#BBFFBB 5％，#AAFFAA 6 ％，＃99FF99 7％，＃88FF88 8％，＃77FF77 9％，＃66EF66 10％，＃55DF55 11％，＃44CE44 12％，＃33BD33 13％，＃22AC22 14％，＃119B11 15％，＃008A00 16 ％，＃008A00 87％，＃119B11 88％，＃22AC22 89％，＃33BD33 90％，＃44CE44 91％，＃55DF55 92％，＃66EF66 93％，＃77FF77 94％，＃88FF88 95％ ％，#AAFFAA 97％，#BBFFBB 98％，#CCFFCC 99％，#DDFFDD 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（left，#EEFFEE 0％，#FFFFFF 1％，#EEFFEE 2％，#DDFFDD 3％，#BBFFBB 5％ #AAFFAA 6％，＃99FF99 7％，＃88FF88 8％，＃77FF77 9％，＃66EF66 10％，＃55DF55 11％，＃44CE44 12％，＃33BD33 13％，＃22AC22 14％，＃119B11 15％ ＃008A00 16％，＃008A00 87％，＃119B11 88％，＃22AC22 89％，＃33BD33 90％，＃44CE44 91％，＃55DF55 92％，＃66EF66 93％，＃77FF77 94％，＃88FF8895％ ＃99FF99 96％，#AAFFAA 97％，#BBFFBB 98％，#CCFFCC99％，#DDFFDD 100％）; / * Opera 11.10+ * / 
 background：-ms-linear-gradient（left，#EEFFEE 0％，#FFFFFF 1％，#EEFFEE 2％，#DDFFDD 3％，#BBFFBB 5％，#AAFFAA 6 ％，＃99FF99 7％，＃88FF88 8％，＃77FF77 9％，＃66EF66 10％，＃55DF55 11％，＃44CE44 12％，＃33BD33 13％，＃22AC22 14％，＃119B11 15％，＃008A00 16 ％，＃008A00 87％，＃119B11 88％，＃22AC22 89％，＃33BD33 90％，＃44CE44 91％，＃55DF55 92％，＃66EF66 93％，＃77FF77 94％，＃88FF88 95％ ％，#AAFFAA 97％，#BBFFBB 98％，#CCFFCC 99％，#DDFFDD 100％）; / * IE10 + * / 
 background：linear-gradient（to right，#EEFFEE 0％，#FFFFFF 1％，#EEFFEE 2％，#DDFFDD 3％，#BBFFBB 5％，#AAFFAA 6％，＃99FF99 7％，＃88FF88 8％，＃77FF77 9％，＃66EF66 10％，＃55DF55 11％，＃44CE44 12％，＃33BD33 13％，＃22AC22 14％，＃119B11 15％，＃008A00 16％，＃008A00 87％，＃119B11 88％，＃22AC22 89％，＃33BD33 90％，＃44CE44 91％，＃55DF55 92％，＃66EF66 93％，＃77FF77 94％，＃88FF8895％，＃99FF99 96％ 97％，#BBFFBB 98％，#CCFFCC99％，#DDFFDD 100％）; / * W3C * / 
} 
 
 2％{
 background：-moz-linear-gradient（left，#DDFFDD 0％，#EEFFEE 1％，#FFFFFF 2％ ，#EEFFEE 3％，#DDFFDD 4％，#BBFFBB 6％，#AAFFAA 7％，＃99FF99 8％，＃88FF88 9％，＃77FF77 10％，＃66EF66 11％，＃55DF55 12％，＃44CE44 13％ ，＃33BD33 14％，＃22AC22 15％，＃119B11 16％，＃008A00 17％，＃008A00 88％，＃119B11 89％，＃22AC22 90％，＃33BD33 91％，＃44CE44 92％ ，＃66EF66 94％，＃77FF77 95％，＃88FF8896％，＃99FF99 97％，#AAFFAA 98％，#BBFFBB99％，#CCFFCC100％）。 / * FF3.6 + * / 
 background：-webkit-linear-gradient（，#DDFFDD 0％，#EEFFEE 1％，#FFFFFF 2％，#EEFFEE 3％，#DDFFDD 4％，#BBFFBB 6 ％，#AAFFAA 7％，＃99FF99 8％，＃88FF88 9％，＃77FF77 10％，＃66EF66 11％，＃55DF55 12％，＃44CE44 13％，＃33BD33 14％，＃22AC22 15％ ％，＃008A00 17％，＃008A00 88％，＃119B11 89％，＃22AC22 90％，＃33BD33 91％，＃44CE44 92％，＃55DF5593％，＃66EF66 94％，＃77FF77 95％ ％，＃99FF99 97％，#AAFFAA 98％，#BBFFBB 99％，#CCFFCC 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（left，#DDFFDD 0％，#EEFFEE 1％，#FFFFFF 2％，#EEFFEE 3％，#DDFFDD 4％ #BBFFBB 6％，#AAFFAA 7％，＃99FF99 8％，＃88FF88 9％，＃77FF77 10％，＃66EF66 11％，＃55DF55 12％，＃44CE44 13％，＃33BD33 14％，＃22AC22 15％ ＃119B11 16％，＃008A00 17％，＃008A00 88％，＃119B11 89％，＃22AC22 90％，＃33BD33 91％，＃44CE44 92％，＃55DF55 93％，＃66EF66 94％，＃77FF77 95％ ＃88FF88 96％，＃99FF99 97％，#AAFFAA 98％，#BBFFBB 99％，#CCFFCC 100％）; / * Opera 11.10+ * / 
 background：-ms-linear-gradient（left，#DDFFDD 0％，#EEFFEE 1％，#FFFFFF 2％，#EEFFEE 3％，#DDFFDD 4％，#BBFFBB 6 ％，#AAFFAA 7％，＃99FF99 8％，＃88FF88 9％，＃77FF77 10％，＃66EF66 11％，＃55DF55 12％，＃44CE44 13％，＃33BD33 14％，＃22AC22 15％ ％，＃008A00 17％，＃008A00 88％，＃119B11 89％，＃22AC22 90％，＃33BD33 91％，＃44CE44 92％，＃55DF5593％，＃66EF66 94％，＃77FF77 95％ ％，＃99FF99 97％，#AAFFAA 98％，#BBFFBB 99％，#CCFFCC 100％）; / * IE10 + * / 
 background：linear-gradient（to right，#DDFFDD 0％，#EEFFEE 1％，#FFFFFF 2％，#EEFFEE 3％，#DDFFDD 4％，#BBFFBB 6％，#AAFFAA 7％，＃99FF99 8％，＃88FF88 9％，＃77FF77 10％，＃66EF66 11％，＃55DF55 12％，＃44CE44 13％，＃33BD33 14％，＃22AC22 15％，＃119B1116％，＃008A00 17％，＃008A00 88％，＃119B11 89％，＃22AC22 90％，＃33BD33 91％，＃44CE44 92％，＃55DF5593％，＃66EF66 94％，＃77FF77 95％，＃88FF8896％ 97％，#AAFFAA 98％，#BBFFBB 99％，#CCFFCC 100％）; / * W3C * / 
}

待续...



相信与否，它的工作原理！我写了一个脚本生成这些行。



我希望你会找到更好的方法。

解决方案

HTML部分很安静，只需要两个不同的div。



HTML：

 < body> 
< div class =background> 
< div class =movement>< / div> 
< / div> 
< / body>

CSS：

 code> .movement 
 {
 background：-webkit-linear-gradient（left，rgba（255，255，255，0）0％，rgba（0,255,0,0.7）25％ ，白色50％，rgba（0,255,0,0.7）75％，rgba（255,255,255,0）100％）; 
 background：-o-linear-gradient（right，rgba（255，255，255，0）0％，rgba（0,255,0,0.7）25％，white 50％，rgba（0,255,0,0.7 ）75％，rgba（255,255,255,0）100％）; 
 background：-moz-linear-gradient（right，rgba（255，255，255，0）0％，rgba（0,255,0,0.7）25％，white 50％，rgba（0,255,0,0.7 ）75％，rgba（255,255,255,0）100％）; 
 background：linear-gradient（向右，rgba（255,255,255,0）0％，rgba（0,255,0,0.7）25％，白色50％，rgba（0,255,0,0.7）75 ％，rgba（255,255,255,0）100％）; 
 width：400px; 
 height：5px; 
 position：relative; 
 -webkit-animation：gradient 6s linear infinite; 
 animation：gradient 6s linear infinite; 
} 
 .background 
 {
 width：1000px; 
 overflow：hidden; 
 height：5px; 
 background-color：＃070; 
} 
 @ -webkit-keyframes gradient 
 {
 0％{left：-400px;} 
 100％{left：1000px;} 
} 
 @keyframes gradient 
 {
 0％{left：-400px;} 
 100％{left：1000px;} 
} 
  
 
 
 
背景div显然是背景，尺寸和颜色。
 
 
 
第二个div是你的第二个颜色的渐变div。它用渐变色。 
动画使div移动到背景之上。
 
 
 
就是这样！试用这里： http://jsfiddle.net/fgeLnbkm/2/  
 
 
 
如果你想自定义它，它是安静方便，大多数事情很容易改变，除了运动div的渐变。
 
I would like to have a colored bar, with another color moving trough this bar. It should look like this, with the white part moving:






I was thinking about something with gradient and the anmiation property of CSS 3. I don't want to use JS!
I tried something like this:



HTML:
<body>
    <div class="navbar_line"></div>
</body>

CSS:
.navbar_line {
animation: gradient 5s linear infinite; 
}
@-webkit-keyframes gradient
{

0% {
background: -moz-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* IE10+ */
background: linear-gradient(to right, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* W3C */
}

1% {
background: -moz-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* IE10+ */
background: linear-gradient(to right, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* W3C */
}

2% {
background: -moz-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* IE10+ */
background: linear-gradient(to right, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* W3C */
}

to be continued...



Believe it or not, it works! I wrote a script which generated those lines. But it's huge, bigger than a picture, therefore not useable.



I hope you'll find better ways.
 解决方案 
The html part is quiet easy, all you need is two different divs.



HTML:
<body>
    <div class="background">
        <div class="movement"></div>
    </div>
</body>

CSS:
.movement 
{
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%); 
    background: -o-linear-gradient(right,  rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%); 
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0,255,0,0.7) 25%, white 50%, rgba(0,255,0,0.7) 75%, rgba(255, 255, 255, 0) 100%); 
    width: 400px; 
    height: 5px; 
    position: relative;
    -webkit-animation: gradient 6s linear infinite;
    animation: gradient 6s linear infinite;
}
.background 
{
    width: 1000px;
    overflow: hidden;
    height: 5px;
    background-color: #070;
}
@-webkit-keyframes gradient
{
    0%   {left: -400px;}
    100% {left: 1000px;}
}
@keyframes gradient 
{
    0%   {left: -400px;}
    100% {left: 1000px;}
}

The background div is obviously for the background, size, color that's it.



The second div is the gradient div with your second color. It is colored with a gradient.
The animation causes the div to move over the background.



That's it! Try out here: http://jsfiddle.net/fgeLnbkm/2/



If you want to customize it, it's quiet handy, most of the things are easy to change, except from the gradient of the movement div.


                        
这篇关于在CSS中移动渐变栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆