CSS背景改变颜色 - 渐变 [英] CSS background changing color - gradients

问题描述

这是我的代码

  -webkit-animation：AnimationName 30s ease infinite; 
 -moz-animation：AnimationName 30s缓解无限; 
动画：AnimationName 30s缓解无限; 
 
 @ -webkit-keyframes AnimationName {
 0％{background-position：0％50％} 
 50％{background-position：100％50％} 
 100％{background-position：0％50％} 
} 
 @ -moz-keyframes AnimationName {
 0％{background-position：0％50％} 
 50 ％{background-position：100％50％} 
 100％{background-position：0％50％} 
} 
 @keyframes AnimationName {
 0％{background-position ：0％50％} 
 50％{背景位置：100％50％} 
 100％{背景位置：0％50％} 
} 
  

这就是基本上一个颜色变化的背景。
每当我像这样在我的html上运行它时...

  #navBar 
 {
字体家族：世纪哥特; 
 -webkit-animation：AnimationName 30s缓解无限; 
 -moz-animation：AnimationName 30s缓解无限; 
动画：AnimationName 30s缓解无限; 
 
 @ -webkit-keyframes AnimationName {
 0％{background-position：0％50％} 
 50％{background-position：100％50％} 
 100％{background-position：0％50％} 
} 
 @ -moz-keyframes AnimationName {
 0％{background-position：0％50％} 
 50 ％{background-position：100％50％} 
 100％{background-position：0％50％} 
} 
 @keyframes AnimationName {
 0％{background-position ：0％50％} 
 50％{背景位置：100％50％} 
 100％{背景位置：0％50％} 
} 
} 
  

我想让背景改变颜色，但是不会发生。我想我必须添加一个背景标签？有人可以做一个codepen或东西，使其工作，我试着试验背景标签，并没有得到任何地方。

基本上我想要的代码动画导航栏（第1节） 。

非常感谢。

如果可能的话，请只用CSS和HTML！ （也使它简单：D）

解决方案

你的CSS格式不正确，关键帧就像下面的选择器一样。我不确定你想改变什么颜色，但是关键帧是如何工作的，你想描述那个时候元素的状态，否则它就像css一样（也只有你需要的语法是-webkit，除非你打算将firefox支持回v〜30左右，所以下面说的是：在0％的情况下，将背景位置向右移动50％，直到动画完成，然后最后移动到最后时刻，回到原来的位置开始

  #navBar {
 font-family：Century Gothic ; 
 -webkit-animation：AnimationName 30s缓解无限; 
 -moz-animation：AnimationName 30s缓解无限; 
动画：AnimationName 30s缓解无限; 
} 
 
 @ -webkit-keyframes AnimationName {
 0％{background-position：0％50％} 
 50％{background-position：100％50％} 
 100％{ background-position：0％50％} 
} 
 @ -moz-keyframes AnimationName {
 0％{background-positio n：0％50％} 
 50％{背景位置：100％50％} 
 100％{背景位置：0％50％} 
} 
 @keyframes AnimationName {
 0％{background-position：0％50％} 
 50％{background-position：100％50％} 
 100％{background-position：0％50％} 
} 
  

with html

 < div id =navBar>< / div> 
  

This is my code

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

So thats just basically a color changing background. Whenever i run it on my html like this...

#navBar
{
font-family: "Century Gothic";
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
}

I want it so that the background changes the color, but that doesnt happen. I think i have to add a background tag? Can someone make a codepen or something to make it work, i tried experimenting background tags and got nowhere.

Basically i want an animated navigation bar with the code (1st section).

Thank you very much.

If possible please only CSS and HTML! (Also make it simple too :D)

解决方案

Your CSS is malformed, the keyframes goes outside of the selector like below. I'm unsure of what colors you want to change to but how keyframes works, you want to describe the state of the element at that moment... otherwise its just like css (also only syntax you need left is the -webkit-, unless you plan on supporting firefox back to v ~30 or so. So what the below says is: at 0 percent, move the background position 50% to the right at halfway through the animation you move down all the way and then at the last moment, move back to the original position it started off at

#navBar {
    font-family: "Century Gothic";
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
   0%{background-position:0% 50%}
   50%{background-position:100% 50%}
   100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
   0%{background-position:0% 50%}
   50%{background-position:100% 50%}
   100%{background-position:0% 50%}
}
@keyframes AnimationName { 
   0%{background-position:0% 50%}
   50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

with html

<div id="navBar"></div>

这篇关于CSS背景改变颜色 - 渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！