我有一个导航栏，它有一个渐变的底部边框。我想为该渐变设置动画，以便颜色移动。我尝试使用本网站提供的动画 http://www.gradient-animator.com/ ，但无法使其正常工作。你能指出我的解决方案吗？我不介意仅使用 CSS，或将 javascript 与它结合使用。
是否可以通过这种方式创建边框图像渐变过渡？ https://jsfiddle.net/q4x5zyty/
我正在尝试为渐变颜色边框设置动画。
body {
height: 100%;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
overflow: hidden;
}
a {
color: #e0dcd4;
text-decoration: none;
}
.top-nav-container {
overflow-x: visible;
overflow-y: visible;
height: 60px;
border-image: linear-gradient(to right, #C04848, #480048) 100% 1;
border-image-slice: 50;
border-width: 0 0 3px 0;
box-shadow: black 0px 12px 9px -9px;
}
.wrapper {
position: static;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
background-color: #0b131b;
background-image: -webkit-radial-gradient(50% 0%, circle farthest-side, #1b232c 8%, #10171d);
background-image: radial-gradient(circle farthest-side at 50% 0%, #1b232c 8%, #10171d);
font-family: Lato, sans-serif;
font-weight: 300;
}
.nav-buttons {
width: 100%;
}
.nav-buttons-each {
width: 25%;
font-family: Lato, sans-serif;
color: #e0dcd4;
font-size: 16px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
}
.top-navbar {
background-color: transparent;
}<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>谢谢!
最佳答案
什么 http://www.gradient-animator.com/正在做的是对背景的位置进行动画处理，以便看起来背景的颜色正在被动画化。 为了达到相同的效果，您将不得不通过嵌套元素来“伪造”边框。这是一个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%}
}
关于javascript - 动画边框颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33043840/