论坛 › 欢乐水吧 › 故乡的歌谣-马健涛【父亲节的歌】

亚伦影音工作室 发表于 2025-6-12 16:18

故乡的歌谣-马健涛【父亲节的歌】

本帖最后由 亚伦影音工作室 于 2025-10-8 04:49 编辑 <br /><br /><style type="text/css">
#bj{position: relative;width: 1286px;height: 720px;background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0f444eed43a41bd8d3f5ef8d9f24c527.jpg)no-repeat center/cover;box-shadow: 0px 0px 0px #000;overflow:hidden;left: -300px;-opt: .2;}

#gp{position: absolute;width: 286px; height: 286px; border-radius: 50%; left: 57px; top:57px;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);animation: rang 6s infinite linear;}
@keyframes rang { to { transform: rotate(360deg); } }
.overlay {content: '';left: 0px;top: 0px;position: absolute;width: 286px;height: 286px;background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);border-radius: 50%;}
#gp:after {position: absolute;top: 50%; left: 50%;margin: -38px;border: solid 1px #aaa;width: 76px; height: 76px;border-radius: 50%;box-shadow: 0 0 0 8px #000078, inset 0 0 0 30px #000078;background: #000;content: '';}
#quanm{position: absolute;width: 300px; height: 300px; left: 55%; top:15%;}
#bfq{position: absolute;width: 90%; height: 60px; left: 5%; bottom: 4px;z-index: 2;overflow:hidden;border-radius:8px;background: url('https://pic.imgdb.cn/item/66bdf24ed9c307b7e9883039.png')no-repeat center / cover}
.center-button-container {position: absolute;top:14px; left:75%; width: 2%;cursor:pointer;}
.mode { background-image: url(""); float: left; width: 70px; height: 60px;opacity: 0; }
#speed {position: absolute; left: 74%;top: 19px;color:#fff;font: 400 1.2em 楷体;width: 70px;z-index: -1;}
#mylist {position: absolute; left: 50%; top:20%; color:#00ff00; width:320px;height:200px;font: 400 1.5em/2em 楷体;}
#mylist a { text-decoration: none; cursor:pointer;color:#00ff00; }
#mylist a:hover { color:#fff000; }
#geci{ --motion: cover2; --tt: 2s;--state: paused; --bg: #ff0000;transform: translate(-50%); position: absolute;top: 75%; left: 50%; font: 600 3em sans-serif; color: snow; white-space: pre;-webkit-background-clip: text; filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 1));}
#geci::before { position: absolute; content: attr(data-geci); width: 20%;height: 100%; color: transparent;overflow: hidden;white-space: pre; background: var(--bg); filter: inherit;
-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#mylrc{width:80%;line-height:30px;margin:45% auto;padding:0px;position:absolute;margin-left:10%;}
#mylrc span{display:block;overflow:hidden;color:black;font-size:0.7cm;font-family:迷你简中倩}
#wzsd1 { animation: wzsd 1.86s linear infinite ; }
@keyframes wzsd {
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%);}}
#sj { position: absolute; font: normal 14px sans-serif;color:#fff; bottom: 24px;right:12%;}
#jd {position: absolute;width: 62%; height:8px;cursor:pointer;bottom: 27px;left:11%;border-radius:2px ;}
#jindu {position: absolute;LEFT:0px;top:0px;--track: #666;--prog: #800000;}
#track { fill: none; stroke: var(--track); }
#prog { fill: none; stroke: var(--prog); }
#btn{ position:absolute;width:25px;height:25px;top:14px;left:58px;cursor:pointer;}
#btn::before,#btn::after{position:absolute;width:25px;height:25px;left:0%;content:'';background:#fff;clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#btn::before{width:25px;height:25px;left:0%;opacity:var(--play);background:#fff;clip-path: polygon(75% 50%, 0 0, 0 100%);}
#btn::after{width:25px;height:25px;opacity:var(--pause);}
#btn:hover {transform:scale(1.2) }
#xq{position:absolute;top:18px;left:96px;width:18px;height:18px;cursor:pointer;background:#fff;clip-path: polygon(70% 50%, 70% 0%, 100% 0, 100% 100%, 70% 100%, 70% 50%, 0 100%, 0 0);}
#xq:hover{transform:scale(1.2)}
#sq{position:absolute;top:18px;left:22px;width:18px;height:18px;cursor:pointer;background:#fff;clip-path: polygon(30% 0%, 30% 50%, 100% 0, 100% 100%, 30% 50%, 30% 100%, 0 100%, 0 0);}
#sq:hover{transform:scale(1.2)}
#cd{position:absolute;top:18px;right:9%;display: inline-block;width: 16px;height: 3px;padding: 3px 0;border-top: 3px solid;border-bottom: 3px solid;
background:#ddd;color:#ddd;background-clip: content-box;}
#cd:hover {transform:scale(1.2)}
#bj:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; bottom: 35px; right:1.6%;font:400 1.2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 11}
</style>
<style>
#bt{ --w: 63%; width: var(--w); overflow: hidden; color: #00ffff; position: absolute; left:45%;top:2%;font-size: 18px;cursor:pointer;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<divid="bj">
<divid="img1"></div>
<div id="quanm">
<svg id="jindu" width="400" height="400">
<g id="circle_wrap" transform="rotate(-90, 200, 200)" style="cursor: pointer;">
<circle id="track" cx="200" cy="200" r="150" stroke-width="8" />
<circle id="prog" cx="200" cy="200" r="150" stroke-width="5" /></g></svg>
<div id="gp"><div class="overlay"></div></div>
</div>
<div id="bfq">
<span id="sj">00:00 | 00:00</span>

<divid="jd"></div>
<divid="btn"title="播放/暂停"></div>
<div id="xq"title="下曲"></div>
<div id="sq"title="上曲"></div>
<div id="cd" ></div>
<span id="fullscreen">全屏显示</span>
   <div class="center-button-container">
<div id="playMode" class="center-icon mode"><imgsrc="https://pic1.imgdb.cn/item/6760d883d0e0a243d4e509eb.png" alt="" /></div>
</div>
<div id="speed" ></div>
</div>
<div id="mylist"></div>
<div id="geci"></div>
<div id="mylrc">
<div id="wzsd1"><span id="geci1" style="color:#ff00ff;text-align:left; "></span></div> <span id="geci2"style="color:#00ff00;text-align:right"></span></div>
<div id="bt"><div>

</div>
<script>
var xmhy = [
["https://s2.ananas.chaoxing.com/sv-w7/audio/e1/74/e7/570ef1247a65073f2173a138dd2f2c81/audio.mp3","故乡的歌谣-马健涛 ",`故乡的歌谣

词曲：马健涛
编曲：马健涛
混音：马健涛
出品：羡慕不已
每当我遥望星空
就想起了远方的人
你的梦有没有成真
会不会偶尔想起我
离开了家乡许多年
万水千山踏遍
尝尽了人间的冷暖
一晃就是几十年
孤单的夜晚想爹妈
泪儿哗啦啦
虽然我很少回老家
而我一直在牵挂
每当我遥望月亮
就想起了我的故乡
那里有妈妈的慈祥
爸爸把我托在肩上
每当我遥望星空
就想起了远方的人
你的梦有没有成真
会不会偶尔想起我
孤单的夜晚想爹妈
泪儿哗啦啦
虽然我很少回老家
而我一直在牵挂
每当我遥望月亮
就想起了我的故乡
那里有妈妈的慈祥
爸爸把我托在肩上
每当我遥望星空
就想起了远方的人
你的梦有没有成真
会不会偶尔想起我
每当我遥望月亮
就想起了我的故乡
那里有妈妈的慈祥
爸爸把我托在肩上
每当我遥望星空
就想起了远方的人
你的梦有没有成真
会不会偶尔想起我
会不会偶尔想起我
`]

];



document.write('<script src="https://file.uhsea.com/2506/755e75e2a712de28102052aa6727939605.js" type="text/javascript" charset="utf-8"><\/script>');
</script>

<script>
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {jd.style.background= 'linear-gradient(90deg, #880000, #880000, #880000 '+ aud.currentTime / aud.duration * 100 + '%, #eee 0)';});
               });

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', bj.requestFullscreen()) : (fullscreen.innerText = '全屏显示', document.exitFullscreen());
                fs = !fs;
      };


wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

杨帆 发表于 2025-6-12 18:04

问好亚伦老师，谢谢经典分享，祝节日快乐{:4_191:}

老谟深虑 发表于 2025-6-12 18:58

          欣赏老师的代码音画，歌曲好听。

樵歌 发表于 2025-6-12 20:05

节日的祝福歌曲必须顶起!{:4_178:}

樵歌 发表于 2025-6-12 20:06

况且制作如此精致！{:4_204:}

樵歌 发表于 2025-6-12 20:07

这歌也非常动听！

红影 发表于 2025-6-12 20:08

漂亮，背景图好看，歌曲好听，不同的歌词切换方式也很别致。
欣赏亚伦老师好帖，祝福父亲节快乐{:4_199:}

查看完整版本: 故乡的歌谣-马健涛【父亲节的歌】