<分区>
<分区>
我无法通过@keyframes 运行线性渐变动画。我认为这是由于我的代码中的 background-position 属性导致了问题。但是，https://webdevtrick.com/css-gradient-background/'>这里，background-position 属性不会导致问题。
我已将我的代码与该站点上的代码进行了比较，以查看我的代码缺少哪些基本属性。这是 CSS 代码:
body {
margin: 0;
}
.navbar {
background-image: linear-gradient(125deg, #337909, #082a87);
height: 10%;
width: 100%;
position: absolute;
-webkit-animation: animebg 5s infinite;
animation: animebg 5s infinite;
background-size: auto;
}
header {
color: aliceblue;
font-family: cursive;
text-align: center;
}
@-webkit-keyframes animebg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes animebg {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='theme.css'>
<style>
</style>
</head>
<body>
<header class='navbar'>
<h1>Welcome!</h1>
</header>
<!--<button type="button" class="button1">Yes!</button>-->
</body>
</html>
最佳答案
我认为你不能在动画中用百分比移动位置(使用另一个单位)，除非你设置 background-size 给它。请看下面的代码片段:
希望对你有帮助:)
body {
margin: 0;
}
.navbar {
background-image: linear-gradient(90deg, #337909, #082a87, #337909);
background-size: auto;
height: 10%;
width: 100%;
position: absolute;
-webkit-animation: animebg 2.5s linear infinite;
-moz-animation: animebg 2.5s linear infinite;
animation: animebg 2.5s linear infinite;
}
header {
color: aliceblue;
font-family: cursive;
text-align: center;
}
@keyframes animebg {
0% {
background-position: 100vw 50%;
}
100% {
background-position: 0 50%;
}
}<header class='navbar'>
<h1>Welcome!</h1>
</header>关于css - @keyframes 动画没有运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58514827/