音乐个人主页html源码
时间: 2023-12-08 14:38:14 浏览: 41
以下是一款带有樱花飘落效果和滚动播放背景图片及随机背景音乐的个人导航页面的HTML源码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人导航页面</title>
<style type="text/css">
body {
background-image: url(bg.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center; animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-moz-animation: bg 60s linear infinite;
-o-animation: bg 60s linear infinite;
}
@keyframes bg {
0% {
background-image: url(bg1.jpg);
}
25% {
background-image: url(bg2.jpg);
}
50% {
background-image: url(bg3.jpg);
}
75% {
background-image: url(bg4.jpg);
}
100% {
background-image: url(bg1.jpg);
}
}
@-webkit-keyframes bg {
0% {
background-image: url(bg1.jpg);
}
25% {
background-image: url(bg2.jpg);
}
50% {
background-image: url(bg3.jpg);
}
75% {
background-image: url(bg4.jpg);
}
100% {
background-image: url(bg1.jpg);
}
}
@-moz-keyframes bg {
0% {
background-image: url(bg1.jpg);
}
25% {
background-image: url(bg2.jpg);
}
50% {
background-image: url(bg3.jpg);
}
75% {
background-image: url(bg4.jpg);
}
100% {
background-image: url(bg1.jpg);
}
}
@-o-keyframes bg {
0% {
background-image: url(bg1.jpg);
}
25% {
background-image: url(bg2.jpg);
}
50% {
background-image: url(bg3.jpg);
}
75% {
background-image: url(bg4.jpg);
}
100% {
background-image: url(bg1.jpg);
}
}
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 36px;
font-weight: bold;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
#music {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 24px;
text-align: center;
line-height: 50px;
z-index: 999;
}
#music audio {
display: none;
}
#music span {
cursor: pointer;
}
</style>
</head>
<body>
<div id="content">
<h1>个人导航页面</h1>
<p>这是一款非常好看的二次元背景动态个人导航页面,有樱花飘落效果和滚动播放背景图片及随机背景音乐,自适应引导页源码看起来非常大气。文字链接修改 index.html 文件。</p>
</div>
<div id="music">
<audio src="music1.mp3"></audio>
<audio src="music2.mp3"></audio>
<audio src="music3.mp3"></audio>
<span onclick="play()">播放</span>
<span onclick="pause()">暂停</span>
</div>
<script type="text/javascript">
var musicList = document.querySelectorAll("#music audio");
var currentMusic = 0;
function play() {
musicList[currentMusic].play();
musicList[currentMusic].addEventListener("ended", function() {
currentMusic++;
if (currentMusic >= musicList.length) {
currentMusic = 0;
}
musicList[currentMusic].play();
});
}
function pause() {
musicList[currentMusic].pause();
}
</script>
</body>
</html>
```
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)