HTML5--带背景音乐的网页

最新推荐文章于 2024-06-01 11:45:22 发布

飞鸿影梦

最新推荐文章于 2024-06-01 11:45:22 发布

阅读量854

点赞数

本文链接：https://blog.csdn.net/weixin_43379235/article/details/107279933

版权

案例界面如下：

网页效果：点击左下角隐藏图片按钮会发现音乐响起和花瓣开始360度旋转运动。当再次单击按钮时，音乐停止，花瓣旋转也停止运动。
详细代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带背景的音乐网页</title>
<style>
	body{background-color:#000000;}
	.rot{animation: play 20s linear infinite;
	    }
	@keyframes play{
		0%{
			transform: rotate(0deg);
		}
		100%{transform: rotate(360deg);opacity: 0;}
	}
	
	#cont{position: relative;width: 800px;height: 520px;margin: 150px auto; overflow: hidden;background: url(http://imgb9.photophoto.cn/20150715/shuicaigufengguzhenghaibaobeijingsheji-29441452_3.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{display: 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 src="http://img.touxiangzhan.com/upload/image/5a856549360n1636331173t26.jpg"  width="60" ></div>
<!--存放运动的花瓣 -->
<ul id="pic">	  
	  <li><img src="https://preview.qiantucdn.com/58pic/35/10/47/41t58PICJMU9qgE4Qr2MQ.gif!qt324new_nowater" alt="" width="180"></li> 
	  <li><img src="https://preview.qiantucdn.com/58pic/35/10/47/41t58PICJMU9qgE4Qr2MQ.gif!qt324new_nowater" alt="" width="180"></li>
	  <li><img src="https://preview.qiantucdn.com/58pic/35/10/47/41t58PICJMU9qgE4Qr2MQ.gif!qt324new_nowater" alt="" width="180"></li>
</ul>
</div>
<!-- 背景音乐-->	
<audio id="audio">
	<source src="song/中央民族乐团 - 高山流水.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.7;
	    mydiv.οnclick=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>

飞鸿影梦

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5--带背景音乐的网页

案例界面如下：网页效果：点击左下角隐藏图片按钮会发现音乐响起和花瓣开始360度旋转运动。当再次单击按钮时，音乐停止，花瓣旋转也停止运动。详细代码如下：<!doctype html><html><head><meta charset="utf-8"><title>带背景的音乐网页</title><style> body{background-color:#000000;} .rot{animatio.
复制链接

扫一扫