童年老家 TO：难难 （学习黑黑Dream Away播放器效果）
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 歌词同步的设置，不满意可以调整下 */
.lrcShow {
font: normal 1.5em 微软雅黑;
pointer-events:none;
left:30%;bottom: 0px;
top:490px;
color:CadetBlue;
z-index:99;
}
.lrcShow::before {
color:#5F9EA0
}
#mydiv { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 538px; background: url('https://file.uhsea.com/2411/da16ff44eea5d6879099879736c2a109RQ.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
#msvg { position: absolute; left: 20%; top: 20%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
#msvg:hover line { transition: 1s; stroke: CadetBlue; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
#plane1{position: absolute;left: 0px;top: 0;width: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T950 10");animation: move 8s linear infinite;}
#plane2 {position: absolute;left: 10px;top: 0;width: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 8s linear infinite;}
#dt1{ position: absolute; width: 140px; height: 165px; top: 345px; left: 1190px; }
#dt2{ position: absolute; width: 32px; height: 32px; top: 450px; left: 110px; z-index: 1;}
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes move { to { offset-distance: 100%;} }
@keyframes rot { to { transform: rotate(-360deg); } }
</style>
<div id="mydiv">
<img id="plane1" alt="" src="https://file.uhsea.com/2411/c9b23eb88226bec170bb1c271e65bbaeTT.gif" />
<img id="plane2" alt="" src="https://file.uhsea.com/2411/c9b23eb88226bec170bb1c271e65bbaeTT.gif" />
<img id="dt1" src="https://file.uhsea.com/2411/9a81e3b727a112013de4e4fe2c8d4382RK.gif" alt="" style="position: absolute; mix-blend-mode: multiply;rotate(360deg);/>
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt=""/>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/34/video63661b6a021fc.mp" autoplay loop muted></video>
<svg id="msvg" width="150" height="150" viewBox="-100 -100 200 200"></svg>
<div class="lrcShow" data-lrc="童年老家" >童年老家</div>
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-90, 0, -40, 0, 'tan', 10, 'round').addTo('lines');
dr.line(-40, 0, 40, 0, ' Crimson', '2').addTo('lines');
dr.line(40, 0, 90, 0, 'tan', 10, 'round').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${180 / all * key})`) );
fscreen.fs('mydiv', 'fsbtn');
// 动态图片控制
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'p\'z l.j(\'3\')){g.n.y=k(){6(2.b){2.b.q.x(2.b);2.b=A;2.5.s=\'\'}6(2.c){2.a=2.c}};g.n.w=k(){v 7=2.a.m(-4);6(7==\'.\')7=7.m(1);6(7==\'u\')7=\'B\';2.r=\'J/\'+7;o 3=l.j(\'3\');o 9=2.9,8=2.8;6(9&&8){6(!2.c){2.c=2.a}3.9=9;3.8=8;3.5.f=2.5.f;3.5.d=2.5.d;3.5.h=2.5.h;3.5.i=2.5.i;3.p(\'D\').F(2,0,0,9,8);G{2.a=3.E(2.r)}C(e){2.H(\'a\');3.5.K=\'I\';2.q.t(3,2);2.5.s=\'0\';2.b=3}}}}',47,47,'||this|canvas||style|if|suff|height|width|src|storeCanvas|storeUrl|left||top|HTMLImageElement|right|bottom|createElement|function|document|substr|prototype|var|getContext|parentElement|type|opacity|insertBefore|jpg|let|stop|removeChild|play|in|null|jpeg|catch|2d|toDataURL|drawImage|try|removeAttribute|absolute|image|position'.split('|'),0,{}))
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
let lrctxt = `
童年老家 - 马健涛
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
院子的狗尾巴
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
小时候玩泥巴
弄脏了衣服啊
妈妈的手会拍我屁股两下
那时候天还蓝
妈的腰还没弯
爸爸的白发还看不见
不知不觉长大
院子风吹雨打
当年的笑声再也没有了
那时候盼过年
如今我怕过年
童年的画面却破旧不堪
家乡的白杨阿
守护着老家
我若回家你还认得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
~Music~
不知不觉长大
院子风吹雨打
当年的笑声再也没有了
那时候盼过年
如今我怕过年
童年的画面却破旧不堪
家乡的白杨阿
守护着老家
我若回家你还认得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
家乡的白杨阿
守护着老家
我若回家你还认得我吗
当年我不听话
总是气爹妈
如今我懂事他们却老了
院子的狗尾草
快高过了门梢
妈妈的味道依然随风飘
每当我放学后
肚子就咕咕叫
好想再喊一声妈我饿了
☆谢谢欣赏☆
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://file.uhsea.com/2411/ea2d6e41044648d932f12d1fd9b0f866FU.mp3",
}
let player = new lrcPlayerY(opts);
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+player.mObj.paused]);
player.mObj.paused ? (player.mObj.play(), vid.play(), plane1.play(), plane2.play()) : (player.mObj.pause(), vid.pause(), plane1.stop(), plane2.stop());
};
player.mObj.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
}
</script> @起个网名好难
谢谢难难的歌词代码，小辣椒学习了 @马黑黑
黑黑我加了2只路径的鸟，也是重新复习以前的东西
感谢黑黑源码分享 漂亮的图图没有了，就找了个以前的小图，凑合完成一个作业了 雅致，美不胜收{:4_199:} 马黑黑 发表于 2024-11-8 21:25
雅致，美不胜收
黑黑晚上好，小辣椒现在也是拉了许多作业了，要赶出来的花时间了 醉美水芙蓉 发表于 2024-11-8 21:36
欣赏小辣椒漂亮图图！
问好水芙蓉，谢谢欣赏 @冬天的雨
有空做一个{:4_197:}{:4_185:} 欣赏美帖！ 小辣椒 发表于 2024-11-8 21:37
黑黑晚上好，小辣椒现在也是拉了许多作业了，要赶出来的花时间了
不用心急，东西都在这里 醉美水芙蓉 发表于 2024-11-8 21:36
欣赏小辣椒漂亮图图！
你速度也是太快了，你知道我这个帖代码弄多久，你立马归你了，老这样你怎么可能会进步，都是拿别人的东西，上次红影的2个代码帖你也是秒拿走，而且连回帖都不回，怎么好意思？
套用没关系啊，那起码说一下，毕竟别人的东西，你上次也是这样的，我的链接都没有换，让人怎么想
最主要的是你每次用了花潮别人的代码，而花潮你没有发， 都发别个地方。
画面好美，歌曲好温暖。欣赏亲爱的好帖，难难收礼开心{:4_187:} 欣赏小辣椒精美的音画，学习了。早上好！{:4_199:} 小辣椒 发表于 2024-11-8 21:38
@冬天的雨
有空做一个
来了来了{:4_189:} 这首歌第一次听，很温馨的感觉，童年的回忆 好吧，冬雨抽空做一个，哈哈，得过几天完成，现在外面的 很好听的一支歌曲。 这歌词同步效果不错，图片虽然简单了一点，整体效果还是漂亮的{:4_189:} 套用完成，修改了你的路径，和播放器表面的颜色，其他统统没有改，谢谢小辣椒，安心休养{:4_179:}
页:
[1]
2