链接:https://pan.baidu.com/s/10byYYUq-7IrKVmvRKAUUXg
提取码:nw72
- 目前,大多数音频是通过插件来播放的,常见的播放插件有flash。
- HTML5新增了audio音频的标签,主要定义播放声音文件或者音频流的标准。
audiob标签的属性:
其用方法如下:<audio src="song,ogg" controls="controls"></audio>
其中controls属性为其添加播放、暂停和音量控制的控制面板。
- 主流浏览器支持.Ogg、.Mp3、,Wav三种音频格式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带背景音乐的网页</title>
<style>
body{background-color: #FFF0F5;}
.rot{animation: play 20s linear infinite}
@keyframes play{
0%{
transform: rotate(0deg);
}
100%{opacity: 0;transform: rotate(360deg)}
}
#cont{position: relative;width: 450px;height: 588px;margin:150px
auto; overflow: hidden;background: url(images/bkg.jpg);background-size:100%
100%}
#cont #box{position: absolute;bottom: 2px;left 10px}
#cont #box img{transition: 0.3s;cursor: pointer;}
#cont #box img:hover{width:70px;}
#pic li{diaplay: inline-block;}
#ll{width: 200px;margin: auto;white-space: pre
-wrap;font: 1.1em/1.6 Arial Black,microsoft yahei, sans-serif}
</style>
</head>
<body>
<div id="cont">
<div id="box"><img width="60" src="images/buttom_flower.png" alt="p"/></div>
<ul id="pic">
<li><img src="images/flower1.png" alt=""></li>
<li><img src="images/flower2.png" alt=""></li>
<li><img src="images/flower3.png" alt=""></li>
<li><img src="images/flower4.png" alt=""></li>
<li><img src="images/flower5.png" alt=""></li>
</ul>
</div>
<audio id="audio">
<source src="music/凉凉.mp3">
</audio>
<script>
var myaudio=document.getElementById("audio");
var mydiv=document.getElementById("box");
var pic=document.getElementById("pic");
var myli=pic.getElementsByTagName("li");
myaudio.volume=0.6;
mydiv.onclick=function(){
if(myaudio.paused){
myaudio.play();
for(i=0;i<myli.length;i++){
myli[i].style.display="block";
myli[i].className="rot";
}
}
else{
myaudio.pause();
for(i=0;i<myli.length;i++){
myli[i].style.display="none";
myli[i].className="";
}
}
}
</script>
</body>
</html>
代码分析:
.rot Class中包含动画属性(动画名称、时间、运动曲线、循环次数)
用关键帧来引出动画名称。制作动画分为两步,起始的时候状态用变化transform;结束的时候 状态用旋转rotate,opacity将透明度设置为0。overflow: hidden表示花瓣位置超出cont范围的时候隐藏起来。
在script中当左下角花瓣被按下时,根据当前的播放状态选择播放或暂停,如果当下执行播放则执行rot动画。
结果演示:
敬请批评指正!