Question

我无法通过@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>

Answer 1

除非您将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>

@keyframes动画未运行

1 个答案: