html - 在 CSS 中移动渐变条-6ren

html - 在 CSS 中移动渐变条

转载作者：太空宇宙更新时间：2023-11-03 23:30:21

我想要一个彩色条，另一种颜色穿过这个条。它应该看起来像这样，白色部分在移动:

Example bar

我在考虑一些带有渐变和 CSS 3 动画属性的东西。我不想使用 JS!我试过这样的事情:

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 */
}

未完待续...

信不信由你，它确实有效!我写了一个生成这些行的脚本。但它很大，比图片还大，因此无法使用。

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

最佳答案

html 部分非常简单，您只需要两个不同的 div。

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;}
}

background div 显然是为了背景，大小，颜色而已。

第二个 div 是具有第二种颜色的渐变 div。它是用渐变色着色的。动画使 div 在背景上移动。

就是这样!在这里试试:http://jsfiddle.net/fgeLnbkm/2/

如果你想定制它，它很方便，大部分东西都很容易改变，除了运动 div 的渐变。

关于html - 在 CSS 中移动渐变条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25554852/

文章推荐： node.js - git 通过 ssh 推送时如何更改用户身份？

文章推荐： c# - 在代码隐藏中将数据网格列宽设置为星号

jQuery - 将主体背景(css 渐变)淡入另一个 CSS 渐变
我使用 jQuery 已经有一段时间了，但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如 b
java - 渐变 + 想法 : can not resolve systemProperty in build. 渐变
为了使用 jni 帮助程序库运行测试，我将这样的代码添加到 build.gradle 中: def jniLibDir = "xxx" tasks.withType(Test) { syste
渐变 wsimport
我正在从命令行运行 wsimport 以从 WSDL 生成 java 类，如下所示。 wsimport -J-Djavax.xml.accessExternalDTD=all -J-
gradle - 在构建过程中将使用的第三方组件的位置(渐变)
我们有一个重复使用第3方 war 的项目(如果有人要求，则为shindig-server-2.0.2.war :)。这场 war 目前位于项目根目录中，当前的ant任务将其解压缩到temp文件夹中，进
python - 在python中的蒙版外的图像上添加模糊/渐变
我有一个边界框，其坐标由(x，y，w，h)给出，其中x和y是框的左上角坐标。我想在盒子外面应用模糊或渐变。如何使用上面的坐标创建蒙版，并使用类似于下图的PIL或cv2在蒙版之外应用此效果？最佳答案
javascript - 动态改变元素背景(渐变)
考虑情况http://codepen.io/anon/pen/JdGYBN 我需要在拖动元素时动态更改卡片“可拖动”的背景颜色。但是卡片的背景应该根据线条的渐变颜色而变化。 background:
javascript - 渐变/不透明度解决方法
我现在有这种情况:JSFIDDLE 我想实现这种效果，但我希望文本可以在渐变后面选择，并且即使我将鼠标放在文本上也可以滚动文本。是否有任何解决方法可以使用 javascript 来改变滚动时文本的不
html - CSS如何实现多重背景+渐变？
这段代码是我从css graident generator得到的，渐变底部是透明的 background: -moz-linear-gradient(top, rgba(248,246,247,1)
两部分图像上的 CSS 渐变
我必须使用 CSS 完成以下图像: 这是一张包含主导航的图像。所以我为此写了一些 CSS(我知道不是正确的颜色代码): #menu-block { background: #730868; b
渐变内的 CSS 渐变
是否可以使用渐变作为渐变中的一种颜色？为了我的特定目的，我有一个从左到右的初始渐变: linear-gradient(to right, red, darkgray); 但我希望深灰色部分实际上是从
CSS 背景过渡 - 渐变
我这辈子都想不通为什么 transition 属性在我的 CSS 中不起作用。这是代码: #header #menu-top-nav ul li a { -webkit-transition:
html - 元素顶部和底部的阴影/渐变
我一直在寻找像下图中那样的多组件日期选择器，但在 Github 或其他地方找不到任何东西。所以我决定做一个。我在实现 CSS 时遇到问题，它在顶部和底部淡出。我想过在容器中使用:before和:a
具有多个停止点和边框的 CSS 渐变
我正在寻找与下图等效的 css。我正在使用多个停止点，但很难获得硬停止点 solid 2px white 边框。如果我添加它，它看起来像是一个渐变而不是硬边。任何帮助都会很棒，谢谢! .stripes
图片的 CSS 渐变
我的广告部门给了我一些图像，将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而，经过几次试验，我无法接近以下图像。对于这两张图片，我将不胜感激。请删除这个
html - 在悬停其他元素时更改主体背景图像/渐变
我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变，我按照他们在另一篇文章 (http://stackoverflow.com/questions/14623
css - 渐变 - 跨浏览器一致性
我正在测试所有浏览器的渐变兼容性，我发现渐变在 FireFox 上有不同的效果。请允许我演示测试。代码 body{
内容很少的 CSS 渐变
当我使用渐变时，当内容很少时，渐变会重复出现，我该如何防止这种情况发生？ http://jsfiddle.net/mcqpP/1/ 我可以尝试使用 html { height: 100%; }，但是当
html - 将导航栏颜色混合到背景颜色(渐变？)
我有一个导航栏，它的背景颜色略深。我想要一个从中心到左右两侧的渐变，以便导航栏最右边和最左边的位达到背景颜色。这可能吗？ -->
适用于多种浏览器的 CSS3 渐变
我在 Firefox 中使用了这个 CSS 线性渐变，但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素，这种风格似乎只适用于 F
css - 渐变:半色半透明
我有这行代码背景:线性渐变(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%); 如您所见，它一半是灰色一半是黑色。有没有办法让它的灰

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在 CSS 中移动渐变条