Question

我做了一个在后台有动态影像的网页。

1. IE和Opera只显示图像不移动它。（字体不也工作）
2. Chrome和Safari也不移动图像。（但字体正确显示）
3. Firefox 根据需要移动图像。（但字体 不显示）

您可以在此处查看网站：http://ankitsuryawanshi.in/projects/404-html/

（编辑过的）CSS代码在这里：

/*-----------------------------------------------------------------------
@FONT-FACE
------------------------------------------------------------------------*/
@font-face {
    font-family: 'ChunkFive-Roman';
    src: url('../fonts/Chunkfive-roman-webfont.eot');
    src: url('../fonts/Chunkfive-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Chunkfive-roman-webfont.woff') format('woff'),
         url('../fonts/chunkfive-roman-webfont.ttf') format('truetype'),
         url('../fonts/chunkfive-roman-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BloklettersBalpen';
    src: url('../fonts/blokletters-balpen-webfont.eot');
    src: url('../fonts/blokletters-balpen-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blokletters-balpen-webfont.woff') format('woff'),
         url('../fonts/blokletters-balpen-webfont.ttf') format('truetype'),
         url('../fonts/blokletters-balpen-webfont.svg#BloklettersBalpen') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*-----------------------------------------------------------------------
LETTERING SPECIFIC STYLES
------------------------------------------------------------------------*/
/* Logo H1 Text */
#logo .word1 {
    margin-left: 3px;
}

#logo .word1 span {
    display: inline-block;
    position: relative;
    letter-spacing: 0;
    transition: width 0.2s;
}

#logo span:hover {
    top: 4px;
}

/*-----------------------------------------------------------------------
DEFAULTS
------------------------------------------------------------------------*/
body {
    color: #000;
    background: #c1b69a url(../images/texture.jpg);
}

a {
    color: #000;
    text-decoration: none;
    outline: none;
}

h1 {
    font-family: 'ChunkFive-Roman', sans-serif;
    color: #1e1e1e;
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
}

h2 {
    font-family: 'ChunkFive-Roman', sans-serif;
    color: #1e1e1e;
    font-size: 114px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: #62b445 1px 1px 0, #62b445 2px 2px 0, #62b445 3px 3px 0, #45a5f6 4px 4px 0, #45a5f6 5px 5px 0, 5px 8px 10px rgba(0,0,0,.35);
}

h3 {
    font-size: 46px;
    font-weight: bold;
    line-height: 1.5;
    color: #262626;
}

h4 {
    font-family: 'ChunkFive-Roman', sans-serif;
    font-size: 26px;
    color: #262626;
    margin-bottom: 20px;
    font-style: normal;
    text-transform: uppercase;
}

.written {
    font-family: 'BloklettersBalpen',sans-serif;
    font-size: 18px;
    color: #000;
}

.written-small {
    font-family: 'BloklettersBalpen', sans-serif;
    font-size: 14px;
    color: #000;
}

p {
    font-size: 20px;
    color: #000;
}

/* About Page Definitions Area */
.col-def-plus p,.col-def-equals p {
    font-size: 80px;
    font-weight: 800;
}

.col-def p {
    font-size: 18px;
}

div.col-def p.word-break {
    font-size: 28px;
    font-weight: 900;
    color: #000;
}

div.col-def p.word-def {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 12px;
    font-style: italic;
    color: #333;
}

#shareTab {
    font-family: 'ChunkFive-Roman', sans-serif;
}

/*-----------------------------------------------------------------------
COMMON CLASSES
------------------------------------------------------------------------*/
.clear {
    clear: both;
}

.wrap {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.ac {
    text-align: center;
}

.line-through {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline;
}

/*-----------------------------------------------------------------------
FLOATING BACKGROUND IMAGES
------------------------------------------------------------------------*/
#clouds {
    z-index: -1;
    background: url(../images/clouds.png);
    position: absolute;
    width: 100%;
    height: 736px;
    display: block;
}

@keyframes "float-clouds" {
 0% {
    background-position: 2400px 0;
 }
 100% {
    background-position: 0 0;
 }

}

@-moz-keyframes float-clouds {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

@-webkit-keyframes "float-clouds" {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

@-ms-keyframes "float-clouds" {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

@-o-keyframes "float-clouds" {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

#clouds {
    animation-name: float-clouds;
    -webkit-animation-duration: 95s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-duration: 95s;
    -o-animation-duration: 95s;
    -ms--animation-duration: 95s;
}

如何更正此处的所有内容，以便在所有浏览器中都能正常使用。

以下是图像移动的JS代码：

       $(document).ready(function() {
  $("#logo h1, .nav-here-home, .nav-here-about, .home-page-tag h3, .about-page-tag h3, .written").lettering('words').children('span').lettering(); 
  $(".home-intro h2").fitText(.86); 
  $(".about-intro h2").fitText(.86);  

});        


// --------------------------------------------------- //
//             Background Image Floating               //
// --------------------------------------------------- //
$(document).ready(function() {
    if (!$.browser.webkit){
        var clouds = $('#clouds');
        var background = 0;
        setInterval(function(){
            background -= 2;
            if (background == 1200) background = 0;
            clouds.css('background-position', background)
        }, 95)
    }
})

我现在应该在哪里编辑它？

Answer 1

看看jQuery .animate（） - 它做动画但是使用javascript代替css3，css3的动画不完全支持，因为它仍然相当新。 http://api.jquery.com/animate/

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $('#clouds').animate({
          'background-position-x': '2400px',
          'background-position-y': '0'
      }, 95*1000, 'linear');
    });
    setInterval(function(){
      $('#clouds').animate({
        'background-position-x': '2400px',
        'background-position-y': '0'
      }, 95*1000, 'linear');
    }, 95*1000);
</script>

Answer 2

我创建了 DEMO 。

我希望这就是你要找的东西。虽然您需要根据需要进行一些调整。

图像不动

2 个答案: