小辣椒 发表于 2022-8-2 21:07

【中伏消暑】第九--十天(年成)爱难求情难断

<style>
#papa { left: -318px; width: 1200px; height: 739px; top: 150px; display: flex; justify-content: center; background: #000 url('http://wx.ttt.dj/data/nfs/img/002.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 18px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; left: 40%;top: 220px; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: -560px; top: 100px; width: 481px; height: 221px; border-radius: 50%; transform: translateZ(20px);}
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color:Black; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: 300px; bottom: 40px; }
</style>

<div id="papa">
      <h2></h2>
      <div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/62e89dd416f2c2beb192d047.gif" alt="" /></div>
      <input id="btnPlay" type="button" value="音乐停" />
      <span id="yyMsg">背景音乐 -爱难求情难断</span>
      <span id="mkMsg"></span>
</div>

<script>
let aud = new Audio();
aud.src = 'https://wx.ttt.dj/data/nfs/mp3/anqiu.mp3';
aud.loop = true;
aud.autoplay = true;

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');

</script>
<br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-8-2 21:08


爱难求情难断(抖音完整版)

编曲:鹏鹏音乐

混音:鹏鹏音乐

宣发:张丹娴/廖文婷

统筹:唐欣宇

监制:莫堂庆/胡伟

爱到尽头说什么再见

相爱多【年】如今只剩抱歉

是爱不够还是缘分太浅

相爱的心碎【成】一片一片

怪我当初对爱太多期盼

此情何时休我抬头问天

思念好似你手中无情剑

一次一次把我灵魂刺穿

爱难求情也难断

痛彻心扉能有几人怜

思念不曾放过我痴情一片

真情留不住往日缠绵

爱难求情也难断

独守相思谁把眼望穿

不想放弃这段无果的姻缘

还在冷风中苦苦期盼

怪我当初对爱太多期盼

此情何时休我抬头问天

思念好似你手中无情剑

一次一次把我灵魂刺穿

爱难求情也难断

痛彻心扉能有几人怜

思念不曾放过我痴情一片

真情留不住往日缠绵

爱难求情也难断

独守相思谁把眼望穿

不想放弃这段无果的姻缘

还在冷风中苦苦期盼

爱难求情也难断

痛彻心扉能有几人怜

思念不曾放过我痴情一片

真情留不住往日缠绵

爱难求情也难断

独守相思谁把眼望穿

不想放弃这段无果的姻缘

还在冷风中苦苦期盼

小辣椒 发表于 2022-8-2 21:08

歌词里面有这2字

又一带二{:4_170:}

小辣椒 发表于 2022-8-2 21:11

@马黑黑

黑黑,看见这个装拆教程分享,立马喜欢上这个播放器了,自己捣鼓了一下,发现这个暂停语句是关联的,我去了,音乐就听不到了。所以这个还得黑黑帮忙指导一下{:4_187:}

小辣椒 发表于 2022-8-2 21:11

@红影

亲爱的,想套用你的,感觉音画直接用这个播放器漂亮,就捣鼓成这样了

马黑黑 发表于 2022-8-2 21:18

小辣椒 发表于 2022-8-2 21:11
@马黑黑

黑黑,看见这个装拆教程分享,立马喜欢上这个播放器了,自己捣鼓了一下,发现这个暂停语句是关 ...

两个按钮各管各的呀:左边的按钮管音乐,中间的按钮管拆装。

CSS部分的注释不能用 //:

// .panel {}×
/* .panel {} */ √

小辣椒 发表于 2022-8-2 21:20

马黑黑 发表于 2022-8-2 21:18
两个按钮各管各的呀:左边的按钮管音乐,中间的按钮管拆装。

CSS部分的注释不能用 //:


不是关联的?那我马上去试一下

马黑黑 发表于 2022-8-2 21:21

小辣椒 发表于 2022-8-2 21:20
不是关联的?那我马上去试一下

你的CSS,

//.panel {}

这样的注释不对额

小辣椒 发表于 2022-8-2 21:24

马黑黑 发表于 2022-8-2 21:21
你的CSS,

//.panel {}


黑黑,我去了暂停文字,音乐就不出来了

小辣椒 发表于 2022-8-2 21:26

马黑黑 发表于 2022-8-2 21:21
你的CSS,

//.panel {}


黑黑,现在这样音乐出来,关闭就没有了

樵歌 发表于 2022-8-2 21:33

小辣椒 发表于 2022-8-2 21:08
歌词里面有这2字

又一带二

好个小机灵鬼{:4_173:}

小辣椒 发表于 2022-8-2 21:34

樵歌 发表于 2022-8-2 21:33
好个小机灵鬼

今天一个晚上5个活动作业完成{:4_170:}

樵歌 发表于 2022-8-2 21:34

河中船上人靠不上岸,好急人{:4_173:}

小辣椒 发表于 2022-8-2 21:36

樵歌 发表于 2022-8-2 21:34
河中船上人靠不上岸,好急人

哈哈,点缀的{:4_189:}

马黑黑 发表于 2022-8-2 21:43

小辣椒 发表于 2022-8-2 21:26
黑黑,现在这样音乐出来,关闭就没有了

你的意思是不要那个面板

马黑黑 发表于 2022-8-2 21:47

小辣椒 发表于 2022-8-2 21:26
黑黑,现在这样音乐出来,关闭就没有了
不要盒子的,代码如下:

<style>
#papa { margin:auto; width: 1200px; height: 739px;top: 150px; display: flex; justify-content: center; background: #000 url('http://wx.ttt.dj/data/nfs/img/002.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 18px; position: relative; }
#papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
#wrapper { position: absolute; left: 40%;top: 220px; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
#ball { position: absolute; left: -560px; top: 100px; width: 481px; height: 221px; border-radius: 50%; transform: translateZ(20px);}
#btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
#yyMsg { position: absolute; left: 110px; bottom: 40px; color:Black; }
#btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
#mkMsg { position: absolute; left: 300px; bottom: 40px; }
</style>

<div id="papa">
      <h2></h2>
      <div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/62e89dd416f2c2beb192d047.gif" alt="" /></div>
      <input id="btnPlay" type="button" value="音乐停" />
      <span id="yyMsg">背景音乐 -爱难求情难断</span>
      <span id="mkMsg"></span>
</div>

<script>
let aud = new Audio();
aud.src = 'https://wx.ttt.dj/data/nfs/mp3/anqiu.mp3';
aud.loop = true;
aud.autoplay = true;

btnBegin.onclick = () => {
      flag = !flag;
      flag ? (TT = setInterval(mkBox, 2000), btnBegin.value = '暂停') : (clearInterval(TT), btnBegin.value = '继续');
}

btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('playing', () => btnPlay.value = '音乐停');
aud.addEventListener('pause', () => btnPlay.value = '音乐放');

</script>

小辣椒 发表于 2022-8-2 21:47

马黑黑 发表于 2022-8-2 21:43
你的意思是不要那个面板

我就是要这个播放器,做我图图里面,特别深颜色的图图特别漂亮,我都自己试了,就这个暂停去不了,去了现在是关不了音乐

马黑黑 发表于 2022-8-2 21:48

小辣椒 发表于 2022-8-2 21:47
我就是要这个播放器,做我图图里面,特别深颜色的图图特别漂亮,我都自己试了,就这个暂停去不了,去了现 ...

你用我修改过的代码试

小辣椒 发表于 2022-8-2 21:48

马黑黑 发表于 2022-8-2 21:48
你用我修改过的代码试

在哪里?

马黑黑 发表于 2022-8-2 21:49

小辣椒 发表于 2022-8-2 21:48
在哪里?

16楼
页: [1] 2
查看完整版本: 【中伏消暑】第九--十天(年成)爱难求情难断