彩蝶双飞
<style>#papa{ margin: 0 0 0 calc(50% - 663px); width: 1164px; height: 640px;background: lightgreen url('http://tuku.link/imgs/2023/04/7ff6e3ca05b67114.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 100; overflow:hidden;}
#jzg{ width: 500px;height: 400px;position: absolute; top:36%; left:0%; z-index:1}
#btn:hover #jzg {
opacity: 0.1; transition: 0.3s;}
@keyframes rotating{
0%{transform: rotate(-360deg);filter:hue-rotate(360deg)}
100%{transform: rotate(0deg);}
}
#grid {width: 1164px;position: absolute;z-index:-1;
height: 640px;overflow:hidden;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: translateX(-200px)rotateZ(0deg);}
50% { transform: translateX(200px)rotateY(0deg);}
52% { transform: translateX(200px)rotateY(180deg);}
100% { transform: translateX(-200px)rotateY(180deg);}
}
</style>
<div id="papa">
<audio id="MusicPlayer" src=https://www.joy127.com/url/102784.mp3"" autoplay loop></audio>
<div class="bfbj">
<divid="btn" >
<div id="jzg"><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://365.tf/disk/tf/1677432888.html" width="500"></iframe></div>
</div>
<div class="lrc">
<div class="p"> <liid="ullrc" >
</li>
</div>
</div>
</div>
</div>
<style>
.bfbj{
width: 100%; height: 100%;margin: 0px 0px;position: absolute;
}
#MusicPlayer{
width: 600px;
display: block;
margin: 0 auto;
}
#btn{width: 500px;height: 500px;position: absolute;
display: block;top:10%; left:65%;
margin: 0px 0px;
}
.lrc{
width: 980px;
height: 140px;position: absolute;top:85%; left:10%;
z-index: 3;
overflow: hidden;
display: block;
margin: 0px 0px;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
display: block;
width: 100%;
margin: 0 auto;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;color: #ff0000;
text-align:center;
transform: translate(0%,0%);
font-weight: normal;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
background-position: 0px 0;
-webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
0%{background-position: -800px 0;filter:hue-rotate(0deg)contrast(180%)brightness(500%);}
}
</style>
<script >
var lrc = `★∮★ 彩蝶双飞★∮★
★∮★演唱刘珺儿& 陈玉双★∮★
★∮★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 = 60;
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;
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
grid.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>grid.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>grid.style.animationPlayState = 'paused');
</script >
要发HTML代码：
① 确保编辑框顶部右边勾选了“纯文本”；
② 编辑框底部左边有“附加选项”，点击它，勾选“HTML 代码”。
修改本帖子，需要先清空所有文本，因为该帖以非HTML方式发布了代码，转到HTML时需要重来了。 问好明月，看了你的代码有错误，播放器位置你要调整一下，居中位置也是要修改，这个播放器 黑黑老师有教程的，就可以去看看 图片链接是http，要兼容模式可以看见 这个是黑黑老师封装的播放器代码，播放器已经在代码中设置了位置，你现在的修改就和封装代码不一致了。
欢迎你~~一起玩播放器{:4_187:} 小辣椒 发表于 2023-4-1 17:22
图片链接是http，要兼容模式可以看见
谢谢老师指导，我是新手 马黑黑 发表于 2023-4-1 16:49
要发HTML代码：
① 确保编辑框顶部右边勾选了“纯文本”；
谢谢老师指导，我是新手 明月 发表于 2023-4-1 18:00
谢谢老师指导，我是新手
新手不是 代码有错误，网页出现错误 编辑也是点击不进去 看情况这个帖你要重新做了@明月 看到两仙女在下棋。但貌似哪里出了点问题 这个代码貌似有问题，让论坛设置都发生了变化。欢迎明月新朋友，欢迎一起玩。
页:
[1]