Question

我一直在创建一个动画背景，其中有一个简单的背景颜色，然后是五个以不同的速度和位置移动的对象。我已经让它自己在文件中工作而没有其他代码，但是当我把它放到我的主文档中时，它就不会像它自己那样工作了。

我有一个带有html等的xsl文档，然后是一个带有css的单独文档。

xsl与代码无关的代码是......

<html>
    <head>  
        <title>Blog</title>
        <link rel="stylesheet" type="text/css" href="blog.css" />
        <script src ="JavaScript.js"> </script>
    </head>

    <div class="star1"></div>
    <div class="star2"></div>
    <div class="star3"></div>
    <div class="star4"></div>
    <div class="star5"></div>

    <body>
    ...
    </body>
</html>

div是每个正在移动的对象，它们在单独的文档中工作，我感觉我的问题与所有内容的定位有关，但我尝试了相对和绝对定位的不同变化好像我希望的那样工作。在下面，每个星被定义为在xsl中设置，但不是像它们在外面那样移动时，它们只是坐在不移动的簇中。

html 
{ 
    padding: 100px 0;
}

body
{
    overflow: hidden;
    background: #0A0F1A no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
}

/*background moved and forms here*/
.star1 
{
    width: 150px; 
    height: 150px;
    background: url(Images/Star1.png); 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;


    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    -webkit-animation: movestar 30s linear infinite;
    -moz-animation: movestar 30s linear infinite;
    -o-animation: movestar 30s linear infinite;
}

.star2
{
    width: 120px; 
    height: 120px;
    background: url(Images/Star2.png); 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 400px; 

    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    -webkit-animation: movestar 50s linear infinite;
    -moz-animation: movestar 50s linear infinite;
    -o-animation: movestar 50s linear infinite;
}

.star3
{
    width: 100px; 
    height: 100px;
    background: url(Images/Star3.png); 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -400px;

    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    -webkit-animation: movestar 20s linear infinite;
    -moz-animation: movestar 20s linear infinite;
    -o-animation: movestar 20s linear infinite;
}

.star4
{
    width: 80px; 
    height: 80px;
    background: url(Images/Star4.png); 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -200px; 

    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    -webkit-animation: movestar 10s linear infinite;
    -moz-animation: movestar 10s linear infinite;
    -o-animation: movestar 10s linear infinite;
}

.star5
{
    width: 60px; 
    height: 60px;
    background: url(Images/Star5.png); 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 100px; 

    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    -webkit-animation: movestar 30s linear infinite;
    -moz-animation: movestar 30s linear infinite;
    -o-animation: movestar 30s linear infinite;
}

@-webkit-keyframes movestar 
{
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-moz-keyframes movestar 
{
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-o-keyframes movestar 
{
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}

任何帮助，为什么它不像之前的动画，将非常感激，因为我已经用尽了如何尝试修复它的想法。感谢。

CSS动画背景不动

0 个答案: