Question

我正在建立一个网站来告诉您天气情况，这是一个了解jquery和使用API的个人项目。我正在尝试将沿着屏幕移动的云的速度映射到风速。问题是我无法使云彩动画正常工作。

#clouds{
    background-size: 300px 217px;
    height:300px;
    width:300px;
    margin: auto;
    background-repeat: repeat-x;
    animation:mymove infinite 10s;  
}

@keyframes mymove {
    from {
            background-position: left bottom;
    }
    to {
        background-position: right bottom;
    }
}

我希望云层会从左向右移动，但它们是静止的

HTML以防万一

 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Weather</title>
        <link rel="stylesheet" href="../static/css/style.css">
        <script src="../app/jquery-3.3.1.min.js"></script>
        <script src="../static/js/getWeather.js"></script>
        <script src="../static/js/pageChange.js"></script>
</head>
<body>
    <div id="sun">
        <div id="clouds">

        </div>
    </div>
</body>

为什么我的背景图像动画没有运行？

0 个答案: