0

我想使用 HTML5 和 CSS3 来加载 MP3/OGG​​，它将与正在显示的文本一起阅读。当它完成屏幕上的内容时，它会切换到新屏幕。

所以第一个屏幕会在 mp3 启动时加载，并一直持续到 12 秒（这是 mp3 上的声音读取它需要多长时间）。在 12 秒时，它切换到下一个文本，该文本将持续到 22 秒。总共将有7个段落。

下面是我找到的一些代码示例，但我无法对其进行编辑以在我需要的时间正常工作。

HTML的基础知识：

<audio controls="controls" preload="auto" autoplay="autoplay">
    <source src="valmp3.ogg" type="audio/ogg" />
    <source src="valmp3.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
</audio> 
<ul>
    <li>Paragraph 1</li>
    <!--^^Should load when the mp3 starts and stay for 12 seconds^^-->

    <li>Paragraph 2</li>
    <!--^^Should load at 12 seconds and stay until 22 seconds^^-->

    <li> Paragraph 3</li>

    <li> Paragraph 4</li>

    <li>Paragraph 5</li>

    <li>Paragraph 6</li>

    <li>Paragraph 7</li>
</ul>

CSS：

* {
  margin: 0;
  padding: 0;
}
body{
  background: #422A20;
  font-size: 2em;
}
ul {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}
ul li {
  color: transparent;
  font-size: 250%;
  position: absolute;
  text-align: center;
  top: 35%;
  width: 100%;
}

/* delay between each text */
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3),
ul li:nth-child(4) {
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
}
ul li:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
ul li:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
ul li:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
ul li:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
ul li:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
/* delay for the last slide */
ul li:nth-child(5) span {
  -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
  -moz-animation: blurFadeIn 1s ease-in 12s backwards;
  -ms-animation: blurFadeIn 3s ease-in 12s backwards;
  animation: blurFadeIn 3s ease-in 12s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
ul li:nth-child(5) span:nth-child(2) {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  -ms-animation-delay: 13s;
  animation-delay: 13s;
}
ul li:nth-child(5) span:nth-child(3) {
  -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -ms-animation-delay: 14s;
  animation-delay: 14s;
}

动画代码：

@-moz-keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); }
}
@-webkit-keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); }
}
@keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); }
}
4

1 回答 1

0

我想你想要这样的东西：http: //jsfiddle.net/VL3Ub/（可能有不同的效果）

我把它简化为我能做到的最简单的形式。

<ul>
    <li>Hello (hello hello hello)</li>
    <li>Is there anybody in there?</li>
    <li>Just nod if you can hear me.</li>
</ul>​

CSS

@-webkit-keyframes fadeInOut{
    from,to{opacity:0;}
    25%,75%{opacity:1;}
}

ul li{
    opacity:0;
    -webkit-animation: fadeInOut 4s ease-in;
}

ul li:nth-child(2){
    -webkit-animation-delay:4s;
}
ul li:nth-child(3){
    -webkit-animation-delay:8s;
}

因此，每个 li 将淡入 1 秒，可见 2 秒，然后淡出 1 秒。然后我只是通过设置动画时间的延迟来错开>=动画。

在考虑嵌套动画时，管理所有内容可能会变得更加棘手，但它应该遵循相同的原则。

我不确定这是否回答了您的问题，或者为您指明了正确的方向，所以如果没有，请告诉我。:)

您可以这样做以使动画持续更长时间。我建议将blurFadeInOut可见步骤调整为10%,90%，或添加动画的第二个版本以延长持续时间。

ul li:nth-child(1) {
  -webkit-animation-duration:12s;
  -webkit-animation-delay: 0s;
}
ul li:nth-child(2) {
  -webkit-animation-duration:10s;    
  -webkit-animation-delay: 12s;
}
ul li:nth-child(3) {
  -webkit-animation-delay: 22s;
}
ul li:nth-child(4) {
  -webkit-animation-delay: 25s;
}
于 2012-11-20T17:52:14.597 回答