谁是那个爱我的人
本帖最后由 醉美水芙蓉 于 2022-6-3 16:28 编辑 <br /><br /> <div style="z-index: 127;width: 1000px; height: 600px; margin-top:15px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 5px 15px #000079; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(https://s1.ax1x.com/2022/03/13/bbOClQ.gif); text-align: center;"><div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://link.hhtjim.com/kw/219797522.mp3"loop ></audio>
<div class="btn">
</div>
<div class="img_border" id="aplay"style="width: 1000px; height: 600px;position: absolute;top:-500px; left:0px;"><img class="img_border" src="https://s1.ax1x.com/2022/06/03/XUlcIf.jpg" style="width: 700px; height: 600px;position: absolute;top:10px; left:-120px;-webkit-mask-image:radial-gradient(black 25% ,transparent 70%);z-index: 100;">
<div class="items" style="text-align:center;position:absolute;top:0px;left:0px;z-index: 200;">
<divclass="lrc">
<ul id="ullrc">
</ul>
</div></div>
</div>
<div class="items" style="margin-top:-420px; margin-left:430px;z-index: 200;">
<spanstyle="color:#fff000;width:780px;height:50px;"><span style="font-family:华文隶书;"><span style="font-size:35px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);">《谁是那个爱我的人》</br>李英</span></span></span>
</div>
</div>
<style type="text/css">
.container{
width: 960px;position: absolute;top:500px; left:0px;
}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.container .btn{
display: block;z-index: 300;
margin: 0px 0px;position: absolute;top:60px; left:80px;
}
.container .lrc{
width: 870px;
height: 140px;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;position: absolute;top:450px; left:80px;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:汉标精工粗犷体;
font-size: 25px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 35px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:-500px; left:00px;transform: scale(1, 1)}
.container .img_border #aplay{border:2px solid #000000;border-radius:0%; }
.container .z360z{animation: rotating 40s linear infinite ;background-size:100% 100%;background-image: url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031214064819863612.gi), url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif), url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213340050925017.gi), url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213392999032271.gi),url(https://s1.ax1x.com/2022/03/13/bbOClQ.gif);}@keyframes rotating{from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}to {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(140%);}}
}
.audio{
z-index: 0;
bottom: 0;
opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
box-shadow:0px 0px 0px 2px #000000;
border-radius:25%;position: absolute;top:480px; left:220px;
}
.audio:hover{
opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >var lrc =`《谁是那个爱我的人》李英
词/曲：春妹
LRC歌词制作： 醉美水芙蓉
每当夜色悄悄降临
心中的痛多了几分
带着疲备独自伤神
多想有个陪我的人
几多心酸几多浮沉
岁月刻下累累伤痕
相爱的人没有缘分
心中的苦独自去吞
谁是那个爱我的人
谁能给我一点温存
收留那颗飘泊的心
给我一份想要的安稳
谁是那个爱我的人
别再错过今生缘分
我准备好一颗真心
茫茫人海只为你转身
几多心酸几多浮沉
岁月刻下累累伤痕
相爱的人没有缘分
心中的苦独自去吞
谁是那个爱我的人
谁能给我一点温存
收留那颗飘泊的心
给我一份想要的安稳
谁是那个爱我的人
别再错过今生缘分
我准备好一颗真心
茫茫人海只为你转身
谁是那个爱我的人
别再错过今生缘分
我准备好一颗真心
茫茫人海只为你转身
茫茫人海只为你转身
谢谢欣赏！
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 80, lrc_ul_height = 70;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
function rbf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
audio.currentTime = 0;
audio.play();
bf.innerText="暂停";
}
function bf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();// 这个就是播放
bf.innerText="暂停";
} else {
audio.pause(); // 这个就是暂停
bf.innerText="播放";
}
}
}
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();</script> 是什么啊？ 是什么啊？ 好卡哦。 好卡哦。 为什么发帖代码上下不留空格呢？位置也是要放中间，这样比较好，感觉水芙蓉的代码是套用别人的？有看见这种上下都顶格的发帖风格，你可以自己修改一下上下尺寸 加林森 发表于 2022-6-2 22:11
好卡哦。
队长都复读机了，是卡了{:4_173:} 小辣椒 发表于 2022-6-2 22:55
队长都复读机了，是卡了
我这里倒是不卡 小辣椒 发表于 2022-6-2 22:55
队长都复读机了，是卡了
有问题 马黑黑 发表于 2022-6-2 23:02
我这里倒是不卡
刚才去看了他的代码，复制到记事本打开都卡，浏览器看看是快一点 小辣椒 发表于 2022-6-2 23:38
刚才去看了他的代码，复制到记事本打开都卡，浏览器看看是快一点
多组代码拼凑，没有优化 漂亮，但好像没法评分呢{:4_204:} 看看谁是
页:
[1]