【母亲节】给妈妈一个吻-马健涛
本帖最后由 亚伦影音工作室 于 2025-10-31 09:57 编辑 <br /><br /><style>#bj{position: relative;width: 1186px;height: 680px;LEFT:-300px;top:120px;overflow:hidden;background:#800 url(https://pic1.imgdb.cn/item/682011c958cb8da5c8ebabf4.webp)no-repeat center / cover;}
#cd{display: none;}
.song-list-containe {position: absolute;
margin-top: 10%;
margin-left: 4%;
color:#000;
width:600px;
font:400 1.2em 仿宋;
}
.song-list {column-count: 2;
list-style: none;
padding: 0;
color: #fff;
overflow-x: hidden;
}
.song-item {list-style: none;
padding: 0.2rem 1rem;
cursor: pointer;
}
.song-item:hover {
color: #00ff00;
}
.song-item.active {
color: #000;
font-weight: 500;
}
.lyrics-container {
position: absolute;
max-height: 250px;
overflow-y: hidden;
overflow-x: hidden;
cursor: pointer;
text-align: center;
MARGIN-LEFT:65%;
margin-top:12%;
font: 500 25px 'FZYaoti', sans-serif;
line-height: 50px;
color: #ccc;
}
.highlight {
color: #000;
padding-left: 0.5rem;
font-size:30px;
}
#bt{ --w: 74%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:71%;top:88%;font:normal 16px 仿宋;cursor:pointer;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 23s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
#bt:hover {
color: #00ff00;
animation-play-state: paused;
}
#bfq{
position:absolute;
width: 450px;
height:350px;overflow: hidden;
background:#0000;
transform:scale(.4);bottom: -100px;
left: -120px;z-index: 20;}
#cp{
position:absolute;
width: 240px;border-radius: 50%;
height:240px;animation: rotating 6s infinite linear;
top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
cursor: pointer;
left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 2px #444;
background:#880000 url('') no-repeat center / cover;
border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
top:6%; left:45%;z-index: 2;
width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
height: 300px;
cursor: pointer;
}
.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}
#prog {position: absolute;z-index: 8;
width: 78%;
height: 2px;background:#ccc;
cursor: pointer;
bottom: 46px;
left:12%;
border-radius: 1px;}
#prog-bar {
height: 100%;
background: #FF0000;
width: 0%;
}
#tmsg {position: absolute;z-index: 8;
font: normal 12px sans-serif;
color: #ffffff;
bottom: 42px;
right: 40px;}
#world,#fullscreen {border-radius: 4px;position: relative;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 75%;top: 30px;
}
</style>
<divid="bj">
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg">00:00|00:00</div>
<span id="world" onclick="btncd()"title="歌曲菜单">菜单显示</span>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="cd">
<div class="song-list-containe">
<p id="song-list" class="song-list">
</p>
</div>
</div>
<div id="lyrics" class="lyrics-container w-full max-w-4xl">
</div>
<div id="bt"><div>
</div>
<script>
var xmhy = [
["https://s2.cldisk.com/sv-w7/audio/ef/32/56/edeaeec187be57523aca2f1592a5fb6a/audio.mp3","给妈妈一个吻-马健涛",`给妈妈一个吻
作词：李冰
作曲：李冰
编曲：马健涛
吉他：马健涛
和声：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
常听妈妈说
要助人为乐
懂礼貌学会爱
你身边的人
妈妈为了我
起早贪黑着
只为了能给我
一个幸福快乐的生活
给妈妈一个吻
感谢妈妈养育恩
给妈妈一个吻
妈妈是最美的人
给妈妈捶捶背
擦干妈妈的汗水
给妈妈揉揉腿
赶走一天的疲惫妈妈万岁
妈妈为了我
起早贪黑着
只为了能给我
一个幸福快乐的生活
给妈妈一个吻
感谢妈妈养育恩
给妈妈一个吻
妈妈是最美的人
给妈妈捶捶背
擦干妈妈的汗水
给妈妈揉揉腿
赶走一天的疲惫妈妈万岁
给妈妈一个吻
感谢妈妈养育恩
给妈妈一个吻
妈妈是最美的人
给妈妈捶捶背
擦干妈妈的汗水
给妈妈揉揉腿
赶走一天的疲惫妈妈万岁`],
["https://s2.ananas.chaoxing.com/sv-w7/audio/1d/83/fc/fc195901d0adf7b0415362a530bc0fe8/audio.mp3","怀念童年-马健涛",`怀念童年
词曲：马健涛
编曲：马健涛
二胡：刘勇
混音：马健涛
母带：马健涛
出品：星光灿烂
发行：看见文娱
寒冬腊月的冬
结冰的家
妈妈手裂了
省下煤火给我温暖啊
把我手贴在
妈妈腰身下
那种感觉温暖无暇
满身的雪花
妈妈心疼啊
换掉衣服被窝搂着我
春天的小草
河里的青蛙
背着书包在路上玩耍
又该收庄稼
大雨不停下
急得爸妈一直转圈啊
转眼入秋了
风霜开始打
一年一年突然的长大
好想回到童年
怀念从前
妈妈做的饭
穿着妈妈缝补的衣衫
那煤油灯下
穿针引线啊
萤火虫点亮妈妈脸颊
寒冬腊月的冬
结冰的家
妈妈手裂了
省下煤火给我温暖啊
把我手贴在
妈妈腰身下
那种感觉温暖无暇
又该收庄稼
大雨不停下
急得爸妈一直转圈啊
转眼入秋了
风霜开始打
一年一年突然的长大
好想回到童年
怀念从前
妈妈做的饭
穿着妈妈缝补的衣衫
那煤油灯下
穿针引线啊
萤火虫点亮妈妈脸颊
寒冬腊月的冬
结冰的家
妈妈手裂了
省下煤火给我温暖啊
把我手贴在
妈妈腰身下
那种感觉温暖无暇
好想回到童年
怀念从前
妈妈做的饭
穿着妈妈缝补的衣衫
那煤油灯下
穿针引线啊
萤火虫点亮妈妈脸颊
寒冬腊月的冬
结冰的家
妈妈手裂了
省下煤火给我温暖啊
把我手贴在
妈妈腰身下
那种感觉温暖无暇
把我手贴在
妈妈腰身下
那种感觉温暖无暇`],
["https://s2.ananas.chaoxing.com/sv-w7/audio/89/af/3a/ed5922e0e6e93c349e999d596d3a0429/audio.mp3","祈福-马健涛",`祈福
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
你淌过坎坷的河
起早贪黑抚养我
汗水从来没干过
寒冬腊月温暖我
你的腰身已弯曲
我的眼泪淅沥沥
皱纹总是瞒着你
留下岁月的痕迹
求求老天爷
让时间慢一些
让妈妈的头发白的晚一些
求求老天爷
让健康多一些
让疾病远离妈妈一些
求求老天爷
让眼泪少一些
让妈妈的笑容从此多一些
求求老天爷
让苦难少一些
让安康陪在妈妈身旁
你的腰身已弯曲
我的眼泪淅沥沥
皱纹总是瞒着你
留下岁月的痕迹
求求老天爷
让时间慢一些
让妈妈的头发白的晚一些
求求老天爷
让健康多一些
让疾病远离妈妈一些
求求老天爷
让眼泪少一些
让妈妈的笑容从此多一些
求求老天爷
让苦难少一些
让安康陪在妈妈身旁
求求老天爷
让时间慢一些
让妈妈的头发白的晚一些
求求老天爷
让健康多一些
让疾病远离妈妈一些
求求老天爷
让眼泪少一些
让妈妈的笑容从此多一些
求求老天爷
让苦难少一些
让安康陪在妈妈身旁
`]
];
const songList = document.getElementById('song-list');
const audio = document.createElement('audio');
const lyricsDiv = document.getElementById('lyrics');
let currentSongIndex = 0;
let currentLyricIndex = -1;
// 生成曲目列表
xmhy.forEach((song, index) => {
const li = document.createElement('li');
li.className = 'song-item';
li.textContent = (index + 1) + "." + song;
li.dataset.index = index;
li.addEventListener('click', () => selectSong(index));
songList.appendChild(li);
});
function selectSong(index) {
document.querySelectorAll('.song-item').forEach(li => li.classList.remove('active'));
document.querySelectorAll('.lyric-line').forEach(line => line.classList.remove('highlight'));
currentLyricIndex = -1;
bt.innerHTML = '正在播放：' + xmhy.length + '首' + "/" + (index + 1) + "." + xmhy;
const selectedLi = document.querySelector(``);
selectedLi.classList.add('active');
currentSongIndex = index;
audio.src = xmhy;
displayLyrics(xmhy);
audio.play();
window.scrollTo({ top: window.scrollY });
}
function displayLyrics(lyricsText) {
lyricsDiv.innerHTML = '';
const lines = lyricsText.split('\n').map(line => line.trim());
const lyricList = [];
lines.forEach(line => {
const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{3})\]/);
if (timeMatch) {
const time = parseFloat(timeMatch) * 60 + parseFloat(timeMatch) + parseFloat(timeMatch) / 1000;
const text = line.replace(timeMatch, '').trim();
lyricList.push({ time, text });
} else {
const timeMatchTwo = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\]/);
if (timeMatchTwo) {
const time = parseFloat(timeMatchTwo) * 60 + parseFloat(timeMatchTwo) + parseFloat(timeMatchTwo) / 1000;
const text = line.replace(timeMatchTwo, '').trim();
lyricList.push({ time, text });
}
}
});
lyricList.forEach(({ time, text }, index) => {
const p = document.createElement('p');
p.className = 'lyric-line';
p.textContent = text;
p.dataset.time = time;
p.dataset.index = index;
p.addEventListener('click', () => jumpToLyric(index));
lyricsDiv.appendChild(p);
});
audio.removeEventListener('timeupdate', updateLyrics);
audio.addEventListener('timeupdate', updateLyrics);
}
function updateLyrics() {
const currentTime = audio.currentTime;
const lyricLines = Array.from(lyricsDiv.querySelectorAll('.lyric-line'));
const newIndex = lyricLines.findIndex((line, index) => {
const lineTime = parseFloat(line.dataset.time);
return lineTime <= currentTime && (lyricLines ? parseFloat(lyricLines.dataset.time) > currentTime : true);
});
if (newIndex !== currentLyricIndex && newIndex !== -1) {
lyricLines?.classList.remove('highlight');
lyricLines.classList.add('highlight');
currentLyricIndex = newIndex;
// 确保高亮行始终位于第3行
const lineHeight = 30; // 每行歌词的高度
const containerHeight = 150; // 歌词容器的高度
const visibleLines = 5; // 可见的行数
const highlightLine = 3; // 高亮行的索引（从0开始计数）
lyricsDiv.scrollTo({
top: lyricLines.offsetTop - lineHeight * highlightLine,
behavior: 'smooth'
});
}
}
function jumpToLyric(index) {
const targetTime = parseFloat(lyricsDiv.children.dataset.time);
audio.currentTime = targetTime;
updateLyrics();
}
audio.addEventListener('ended', () => {
currentSongIndex = (currentSongIndex + 1) % xmhy.length;
selectSong(currentSongIndex);
});
selectSong(currentSongIndex);
</script>
<script>
function btncd() {
var img = document.getElementById("cd");
if (document.getElementById("world").innerHTML == "菜单隐藏") {
img.style.display = 'none';
document.getElementById("world").innerHTML = "菜单显示";
} else {
img.style.display = 'block';
document.getElementById("world").innerHTML = "菜单隐藏";
}
}
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
bj.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
audio.addEventListener('timeupdate', () => {
tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);
});
function toMin(val) {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth; }
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
const percent = (audio.currentTime / audio.duration) * 100;
progBar.style.width = percent + '%';
});
cp.onclick = cz.onclick = () => audio.paused ? (audio.play(), cz.classList.remove('purple'),vid.play()) : (audio.pause(), cz.classList.add('purple'),vid.pause());
cp.style.animationPlayState = audio.paused ? 'paused' : 'running';
audio.addEventListener('playing', () => cp.style.animationPlayState = 'running');
audio.addEventListener('pause', () => cp.style.animationPlayState = 'paused');
bt.style.animationPlayState = audio.paused ? 'paused' : 'running';
audio.addEventListener('playing', () => bt.style.animationPlayState = 'running');
audio.addEventListener('pause', () => bt.style.animationPlayState = 'paused');
document.querySelectorAll('.lyric-line').forEach(line => {
line.addEventListener('click', event => {
event.preventDefault();
event.stopPropagation();
});
});
</script> 祝全世界的妈妈们节日快乐！ 谢谢亚伦老师精彩分享！祝天下母亲节日快乐{:4_204:} 三首歌都带歌词的，都是祝福母亲的。制作真漂亮。
欣赏亚伦老师好帖{:4_199:} 借亚伦老师好帖，同祝全天下的母亲节日快乐{:4_177:} 亚纶这个制作也是挺好的，可以多歌曲欣赏，小辣椒收藏代码，也是后面要玩一次 借美帖祝福所有的母亲都节日快乐！ 学习亚伦老师代码！祝福所有的母亲都节日快乐！{:4_187:} 欣赏了 感谢佳作分享 老师好作品，收藏学习。
页:
[1]