雪花飘落的时候 - 小幺【文本歌词】
本帖最后由 亚伦影音工作室 于 2025-2-6 12:17 编辑 <br /><br /><style>#papa{left: -38%; top: 30%; width:1164px;position: relative; height:620px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:#440;}
.lefto {
position: absolute;
width: 45%;
margin: 60px;
}
.tp {background:url('https://img4.oldkids.cn/upload/2020/12/07/photo_20201207152023941.png') no-repeat center/100%;
text-align: center; width: 600px; height: 350px;
}
.gc{position: absolute;
top: 60px;
left: 60%;
text-align: center;
list-style-type: none;
height: 500px;
line-height: 40px;
}
.start{color: #ccc;position: absolute; top:74%; left: 22%;}
.end{color: #ccc;position: absolute;top:74%; left: 33%;}
#btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 27%; top: 72%;position: absolute;
}
#prog {position: absolute;z-index: 8;
width: 600px;border-radius:100px;
height: 25px;background:#330;
cursor: pointer;
bottom: 45px;
left:5%;
border-radius: 1px;}
#prog-bar {
height: 100%;
background: #ccc;
width: 0%;
}
</style>
<div id="papa">
<div class="lefto">
<div class="tp">
</div>
</div>
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div class="gc">
<marquee id="marquee"scrollAmount=1 width=400 height=500 direction=up> <font face="heiti" size="5" color="#eee"><p style="text-align: center;">雪花飘落的时候 - 小幺<br>
作词：悟义<br>
作曲：李杰<br>
演唱：小幺<br>
代码策划：亚伦<br>
雪花在天上飘来飘去<br>
好似故意拨弄我的思绪<br>
我知道老天的安排无法改变<br>
我还陶醉在过去的梦里<br>
那是一个寒冷的冬季<br>
草原的大雪飘满地<br>
你悄悄为我披上了破旧的大衣<br>
大衣里还有你的体温你的气息<br>
我爱草原冰雪的纯洁<br>
我爱草原真实的美丽<br>
我爱草原雪花的浪漫<br>
爱草原纯洁的美丽<br>
亚伦影音工作室倾情打造<br>
难以忘记你多情的眼神<br>
刻在我心上的初恋的痕迹<br>
难以忘记你憨憨的笑声<br>
还有你刻在我心上初恋的痕迹<br>
我爱草原冰雪的纯洁<br>
我爱草原真实的美丽<br>
我爱草原雪花的浪漫<br>
爱草原纯洁的美丽<br>
我爱草原冰雪的纯洁<br>
我爱草原真实的美丽<br>
我爱草原雪花的浪漫<br>
爱草原纯洁的美丽<br>
难以忘记你多情的眼神<br>
刻在我心上的初恋的痕迹<br>
难以忘记你憨憨的笑声<br>
还有你刻在我心上初恋的痕迹<br>
我爱草原冰雪的纯洁<br>
我爱草原真实的美丽<br>
我爱草原雪花的浪漫<br>
爱草原纯洁的美丽<br>
我爱草原冰雪的纯洁<br>
我爱草原真实的美丽<br>
我爱草原雪花的浪漫<br>
爱草原纯洁的美丽</p></font></marquee>
</div>
</div>
<audio id="aud" src="https://img2.oldkids.cn/upload/2025/02/02/blog_260848378_20250202090932040.mp3" autoplay loop ></audio>
<script>
var music = document.getElementById('aud');
var marquee= document.getElementById('marquee');
var btn = document.getElementById('btn');
btn.onclick = function() {
if (aud.paused) {
aud.play();
marquee.start();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
} else {
marquee.stop();
aud.pause();
btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
};
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
}, 1000)
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
varpercent= (aud.currentTime / aud.duration) * 100;
progBar.style.width = percent + '%';
});
</script>
欣赏美。 这个文本歌词按照自己的速度滚动，不能跟着进度条的变化而变化呢{:4_173:} 这样的文本歌词也漂亮{:4_187:}
页:
[1]