1

我正在尝试将这个 Flash 动画重新创建为 HTML/CSS，但我被卡住了。

这是实际的动画，第一张深色背景的图像淡入，然后下一张图像会向下滑动

http://www.learner.org/series/econusa/interactivelabs/graphing-lab_moose-synthesizer-co/

这是我到目前为止所得到的......如何添加第二张图片以向下滑动？

http://jsfiddle.net/tetonline/QZNut/2/

HTML

<img onload="this.style.opacity='1';" src="https://tchuatocolearner.eppi.com/temp/graphinglab/images/blur.png" />

CSS

img {
    opacity:0;
    -moz-transition: opacity 3s;
    /* Firefox 4 */
    -webkit-transition: opacity 3s;
    /* Safari and Chrome */
    -o-transition: opacity 3s;
    transition: opacity 3s;
}
4

1 回答 1

1

我创建了一个粗略的版本，您可以使用它使用 CSS3 动画和两个 javascript 函数来简单地添加/删除动画类。在这里查看

这将比完整的 javascript/jQuery 版本执行得更好。

另外，我建议将向下滑动的元素div设置为 s 而不是imgs，这样您就可以在其中包含内容，就像我添加的按钮一样。

这是相关代码

<div id='firstDiv' class='overlay moveDown'>
  <button onclick='firstAction()'></button>
</div>
<div id='secondDiv' class='overlay'>
  <button onclick='secondAction()'></button>
</div> 
<div id='content' class='fadeMe'>...Content...</div>

// CSS
.overlay {
    position:absolute;
    left:50%;
    top:-500px;
    margin-top:-200px;
    margin-left:-250px;
    width:500px;
    height:400px;
    background-repeat: no-repeat;
    background-size: 100%; 
    z-index:3;
}
@keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-webkit-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-moz-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-ms-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}
@-o-keyframes movedown {
    0% {
        top:-100%;
    }
    100% {
        top:50%;
    }
}

@keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-webkit-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-moz-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-ms-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
@-o-keyframes moveup {
    0% {
        top:50%;
    }
    100% {
        top:-100%;
    }
}
#firstDiv {
    background-image: url(http://img2.timeinc.net/people/i/2013/pets/news/130304/kitten-3-600.jpg);
}
#secondDiv {
    background-image: url(http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg);
} 
.moveDown {
  -webkit-animation: movedown 2s linear forwards;
  -moz-animation: movedown 2s linear forwards;
  -ms-animation: movedown 2s linear forwards;
  -o-animation: movedown 2s linear forwards;
  animation: movedown 2s linear forwards;
  <!--
  animation-name:"movedown";
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -->
}
.moveUp {
  -webkit-animation: moveup 2s linear forwards;
  -moz-animation: moveup 2s linear forwards;
  -ms-animation: moveup 2s linear forwards;
  -o-animation: moveup 2s linear forwards;
  animation: moveup 2s linear forwards;
  <!--
  animation-name:"moveup";
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -->
}
#content {
  padding:40px;
  margin:0 auto;
  width:75%;
  height:75%;
  opacity:1;
  transition:2s opacity;
}
#content.fadeMe {
  opacity:.4;
  z-index:-1;
}

// Javascript
function firstAction() {
  var elem = document.getElementById('firstDiv'),
      elemTwo = document.getElementById('secondDiv');
  elem.className = 'overlay moveUp';
  elemTwo.className = "overlay moveDown";
} 

function secondAction() {
  var elem = document.getElementById('secondDiv'),
      main = document.getElementById('content');
  elem.className = 'overlay moveUp';
  main.className = '';
}

编辑添加浏览器前缀

再次编辑，因为显然 Safari 不喜欢像素和百分比混合

于 2013-08-20T00:55:09.503 回答