书小宅之网页设计实战——带有背景音乐和动画的网页

原创已于 2022-07-13 10:39:56 修改 · 627 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#网页背景音乐 #网页动画 #实战练习

于 2019-07-23 15:29:50 首次发布

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML5的audio标签实现网页背景音乐，并结合CSS3动画制作动态效果。详细解析了代码实现过程，包括播放控制、动画设计等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

链接：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动画。

结果演示：
在这里插入图片描述
敬请批评指正！