我想使用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); }
}
我想你想要这样的东西: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;
}