6.29央6 湾区升明月专辑（学习黑师《巫娜-茶道》专辑效果）
本帖最后由 南无月 于 2023-7-1 18:25 编辑 <br /><br /><style>#mydiv {margin: 30px auto;
padding: 20px 10px;
width: 700px;
min-height: 400px;
border-radius: 12px;
border: 2px solid var(--fColor);
color: var(--fColor);
background: var(--bgMain);
position: relative;
--bgMain: linear-gradient(snow,NavajoWhite,snow);
--bgTitle: snow;
--fColor: navy;
--btnWidth: 50px;
overflow: hidden;
--state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
padding: 0 20px;
font: bold 24px / 36px sans-serif;
text-shadow: 1px 1px 2px #111;
border: inherit;
border-radius: inherit;
background: var(--bgTitle);
}
#mydiv::before {
content: '湾区升明月';
left: 18px;
top: -1px;
}
#mydiv::after {
content: attr(data-tt);
position: absolute;
left: 50%;
bottom: 1px;
transform: translateX(-50%);
font-size: 14px;
line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
position: absolute;
width: var(--btnWidth);
height: var(--btnWidth);
background: conic-gradient(red,orange,yellow,green,teal,GoldEnrod,purple);
border-radius: 50%;
bottom: 30px;
left: calc(50% - var(--btnWidth) / 2);
cursor: pointer;
pointer-events: auto;
animation: rot 5s infinite linear var(--state);
}
#mlist { margin: 20px; column-count: 3; column-rule: 2px solid transparent; column-gap: 100px; column-fill: balance; }
#mlist > span { display: block; width: fit-content; }
#mlist a { text-decoration: none; }
#mlist > span > a:hover { cursor: pointer; color: red; }
.lighten > a { color: red; }
.normal > a { color: var(--fColor); }
@keyframes rot { to { transform: rotate(360deg); } }
#vid {
position: absolute;
width: 900px;
height: 130%;
top:1px;
left:-80px;
border-radius: 2%;
opacity: .36;
object-fit: cover;
pointer-events: none;
}
</style>
<div id="mydiv" data-tt="00:00/00:00"><p><br />《"湾区升明月”2023大湾区电影音乐晚会》以团聚团圆为主旋律，以电影和音乐为媒介，邀请内地观众、港澳台同胞、全球华人共享电影之美、和合之美，共同感受大湾区的文化氛围，欢庆喜悦与温暖的团聚时刻。</p>
<div id="mlist"><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/34/5b57dc0890be5.mp4" autoplay="" loop="" muted=""></video></div>
<div id="mplayer"></div>
<p style="text-align: right">资源来自网络 2023年6月30日</p></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" autoplay="autoplay"></audio>
<script>(function () {
let spans = [];
let ypAr = [['34280713','万里长城永不倒'],['113884','红日-李克勤'],['109757','中国人'],['32785700','一生所爱'],['330706','星语心愿'],['5271860','刀剑如梦'],['1429460588','彩云追月'],['135848','涛声依旧'],['2010622364','晚风心里吹'],['310689','明月千里寄相思'],['28186082','顺流逆流'],['33361840','我是一只小小鸟'],['1899983984','特别的爱给特别的你'],['1932055348','有何不可'],['152426','水中花'],['212233','千千阕歌'],['5284003','朋友'],['537854964','失恋阵线联盟'],['2000135585','湾-王菲'],['5249199','上海滩'],['1891915421','笑看风云'],['473284961','一生何求'],['193752','万水千山总是情'],['1890463652','爱是一样的'],['1993357678','鸿雁'],['2022288325','花好月圆月'],['66578','信自己'],['1840861309','万疆'],['33854083','初恋'],['1914727873','永不失联的爱'],['225871','夜来香'],['1888076998','我只在乎你'],['473289829','恰似你的温柔'],['204666','甜蜜蜜'],['1847408145','月亮代表我的心'],['1397662832','又见炊烟'],['1319704666','潇洒走一回'],['1883441149','圆'],['1892525137','上海滩']];
ypAr.forEach((item) => item = 'https://music.163.com/song/media/outer/url?id=' + item);
ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr}</a>`;mlist.appendChild(sp);spans.push(sp);});
mplay = (idx, flag = 0) => {aud.src = ypAr;if (flag >= 0) aud.play();spans.className = 'normal';spans.className = 'lighten';lastIdx = idx;}
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
let lastIdx = Math.floor(Math.random() * ypAr.length);
mplay(lastIdx);
})();</script>
月儿厉害，还加了个视频进去。这么多歌曲，这下够听了{:4_173:}{:4_199:} 月儿还把标题和时间框都调到总框里去了，看着这样的画面，一个个点着歌曲，觉得真是美好享受呢{:4_187:} 月儿总能带来惊喜，这个帖子太美了{:4_199:} 红影 发表于 2023-6-30 19:41
月儿厉害，还加了个视频进去。这么多歌曲，这下够听了
啊，，有视频啊，那要电脑上去看了 月月这么多歌曲进去已经很震撼了，而且那夜来香出来已经惊艳到了，好听{:4_178:} 音乐是随机出来的 小辣椒 发表于 2023-6-30 19:59
啊，，有视频啊，那要电脑上去看了
是啊，非常漂亮的呢{:4_173:} 红影 发表于 2023-6-30 21:31
是啊，非常漂亮的呢
看见了，特意电脑上来看看，背景视频加了有灵动感，只是要电脑欣赏 小辣椒 发表于 2023-6-30 22:59
看见了，特意电脑上来看看，背景视频加了有灵动感，只是要电脑欣赏
不知道为什么手机看不了这个视频。有视频多好呀！ 醉美水芙蓉 发表于 2023-6-30 20:57
月儿厉害！这么多歌曲！
这个是央视6套29号晚上节目单的大部分歌曲，十分经典，就想做个专辑 红影 发表于 2023-6-30 19:41
月儿厉害，还加了个视频进去。这么多歌曲，这下够听了
照着晚湾区升明月的晚会节目单整的大部分歌曲{:4_187:} 红影 发表于 2023-6-30 19:44
月儿还把标题和时间框都调到总框里去了，看着这样的画面，一个个点着歌曲，觉得真是美好享受呢
影子看出来了，这个是不得已的，因为加了视频限定了，只好移框里了。{:4_187:} 红影 发表于 2023-6-30 19:46
月儿总能带来惊喜，这个帖子太美了
感谢影子鼓励{:4_187:} 小辣椒 发表于 2023-6-30 20:01
月月这么多歌曲进去已经很震撼了，而且那夜来香出来已经惊艳到了，好听
老歌太经典了。。那台晚会很值得看{:4_187:} 小辣椒 发表于 2023-6-30 20:02
音乐是随机出来的
对，这个是抄的代码。{:4_187:} @马黑黑 按老师教的方法单独改了小播的颜色。。 南无月 发表于 2023-7-1 18:26
@马黑黑 按老师教的方法单独改了小播的颜色。。
嗯，进步很大，老厉害了 马黑黑 发表于 2023-7-1 19:15
嗯，进步很大，老厉害了
老师鼓励比啥都管用{:4_170:}比热水管用