Question

我有一个导航栏，它有一个渐变的底部边框。我想为该渐变设置动画，以便颜色移动。我尝试使用此网站http://www.gradient-animator.com/上提供的动画，但无法使其正常运行。你能指点我一个解决方案吗？我不介意只使用CSS，或者使用javascript的一些组合。

是否可以通过这种方式创建边框图像渐变过渡？ https://jsfiddle.net/q4x5zyty/

我正在尝试为渐变色边框设置动画。

＆＃13;

<body>
  <div class="wrapper">
    <div class="w-container top-nav-container">
      <div class="w-nav top-navbar" data-collapse="tiny" data-animation="default" data-duration="400" data-contain="1">
        <div class="w-container">
          <nav class="w-nav-menu nav-buttons" role="navigation">
          </nav>

＆＃13;

def norepeat(a):
R=[]
i=0
while i<len(a):
    if a[i] in R:
        i=i+1
    else:
        R.append(a[i])
        i=i+1
return R

a=list(input("enter list(elements seperated by commas):"))
L=len(a)
R=norepeat(a)
print R
print R[1]
l=(len(R))
print l
i=0
while i<l:
    j=0
    count=0
    while j<L:
        if R[i]==L[j]:#error:'int' object has no attribute '__getitem__'
            count+=1
        if j==l-1:
            print R[i],"occurs",count,"times"
    j=j+1
i=i+1

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
<ipython-input-13-73b7f443c37e> in <module>()
 23     count=0
 24     while j<L:
 ---> 25         if R[i]==L[j]:
 26             count+=1
 27         if j==l-1:

 TypeError: 'int' object has no attribute '__getitem__'

＆＃13;

谢谢！

Answer 1

http://www.gradient-animator.com/正在做的是动画背景的位置，以便看起来背景的颜色是动画的。为了达到同样的效果，你必须＆＃34;假＆＃34;嵌套元素的边界。这是jsfiddle。

html：

<div>
    <div> HELLO </div>
</div>

css：

（外部元素的填充实际上是其子代的border-width）

div{

    background: linear-gradient(85deg, #246655, #d0e8e2, #ae59bb);
    background-size: 600% 600%;
     padding:20px;
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;

}
div > div{
    height:400px;
    background:#fff;


}

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

Answer 2

<!doctype html>
<html>
<head>
<title>Gradient Animation</title>
<meta charset="UTF-8"/>
<style>
.head {
background: linear-gradient(270deg, #cc0000, #0028cc, #ccc800);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
width: 500px;
height: 300px;
}
.head-mid {
background: #fff;
width: 500px;
height: 280px;
}
@-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%}
}

</style>
</head>
<body>

<div class="head">
<div class="head-mid"></div>
</div>

</body>
</html>

试试这个：）

动画边框颜色

2 个答案:

html：

css：