这篇博客展示了如何利用HTML的`<marquee>`标签和CSS样式来创建一个滚动歌词的效果。通过设置不同的`scrollamount`属性实现歌词逐行滑动，配合背景图片和音频播放，营造出音乐歌词展示的氛围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cont{
width: 500px;
height: 1000px;
background: url("img/bg.png") no-repeat;
margin-left: 400px;
position: relative;
}
marquee{
text-align: center;
font-size: 20px;
}
audio{
margin-top: 900px;
margin-left: 100px;
position: absolute;
}
.a{
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div class="cont">
<audio src="img/bg.mp3" controls="controls"></audio>
<marquee class="a" direction="left" behavior="slide" scrollamount="10">思有邪</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">因春风不告而别</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">芳菲意兴阑珊</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">白云走出了峰峦</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">徘徊一马平川</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">舟不厌其烦</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">往返一溪烟</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">我也有意马心猿</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">只为你驰骋万千</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">单刀赴会桃花劫</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">身无风月盘缠</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">在人山人海久周旋</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">不如就明目张胆</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">伸手向你讨个欢</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">两袖清风不值钱</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">一襟晚照算半吊铜板</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">你一生中的春夜</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">都抵予我做细软</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">如若把酒寻欢</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">觅得天地宽</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">恰到好处醺醺然</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">任你交杯也任你推盏</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">我自顾情干</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">小神仙偏爱夜晚</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">散一手星疏淡</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">老和尚借口化缘</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">和衣而卧青山</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">美人佩刀剑</marquee>
<marquee direction="left" behavior="slide" scrollamount="10">侠客执花环</marquee>
</div>
</body>
</html>
扫一扫
2007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
