跟唱：《我为岁月斟满一杯酒》--使用马老师的花潮播放器，代码抄袭坛友
本帖最后由 寒冬残荷 于 2025-8-14 19:46 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa {position: absolute; left: 50%; transform: translate(-50%, 50px); --offsetX: 0px; width: clamp(600px, 80vw, 1280px); height: auto; aspect-ratio: 16/9; --bg:url('https://pic1.imgdb.cn/item/689dc41a58cb8da5c82502be.jpg') no-repeat center/cover; --bg1: lightblue; --state: runnig; transition: 0.5s; --ma-size: 3%; --per: -2%; --a: 45deg; }
#pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
#ma {left: 22%; top: 30%; background: url('https://642303.freep.cn/642303/za/fl1033.png') no-repeat center/cover;}
#btnFs {left: 50%; top:20px; color:#000000; }
.qk-vid {mix-blend-mode:screen; opacity:0.85; -webkit-mask: linear-gradient(to bottom,transparent 0%,transparent 20%,red 100%); mask:linear-gradient(to bottom,transparent 0%,transparent 20%,red 100%); position: absolute;}
.son {position: absolute; width: 10%; height: 50%; }
.son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: repeating-conic-gradient(BlueViolet,transparent,White 10%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: scale(1); }
.son:nth-of-type(2) { transform: rotate(90deg); }
#lrc { position: absolute; left: 35%; bottom: 50px; color: #ff0; font-size: 40px; font-weight: bold; text-shadow: 1px 1px 1px #6d06f9; opacity: 1; letter-spacing:4px; }
</style>
<div id="pa">
<audio id="aud" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=5qVHDE5HLqlmT57E&shareuid" autoplay loop ></audio>
<video class="qk-vid" loop muted src="https://img2.oldkids.cn/upload/2025/08/14/blog_260802952_20250814142441629.mp4" style="right:1px; bottom:1px; width:405px; height:720px; object-fit: cover; mix-blend-mode: soft-light; -webkit-mask: linear-gradient(270deg, red 0 10%, transparent 90%); mask: linear-gradient(270deg, white 0 50%, transparent 90%); pointer-events: none; isolation:isolate; transform:translateZ(0); "></video>
<div id="ma" class="invert hue-rotate ">
<div class="son"></div>
<div class="son"></div>
</div>
<div id="lrc">HUACHAO LRC</div>
</div>
<div style="height:500px"><br><br><br><br><br><br><br><br><br><br></br></br></br></br></div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';
var geci = `
我为岁月斟满一杯酒
词:徐晓岚
曲:李勇军
原唱:影子
跟唱:寒冬残荷
心中装满了生活的忧愁
手中捧着一壶浓烈的酒
人生不过几十个春秋
可脚下的路来去不自由
转眼之间已经白了头
要想的改变也成了奢求
香烟一灭该愁的还是愁
如果情淡了要走该怎么留
我为岁月斟满一杯酒
岁月赐我心酸和泪流
现实中难有一生无忧
命运捉弄谁又能左右
我为岁月斟满一杯酒
岁月赐给我一身的伤口
杯中装满了痛苦和忧愁
酒醒之后继续往前走
哦继续往前走
转眼之间已经白了头
要想的改变也成了奢求
香烟一灭该愁的还是愁
如果情淡了要走该怎么留
我为岁月斟满一杯酒
岁月赐我心酸和泪流
现实中难有一生无忧
命运捉弄谁又能左右
我为岁月斟满一杯酒
岁月赐给我一身的伤口
杯中装满了痛苦和忧愁
酒醒之后继续往前走
哦继续往前走
谢谢聆听！
`;
FS(pa, ma);
lrc(pa, geci);
</script>
感谢马老师的无私奉献！{:4_204:}{:5_106:}代码主要是抄袭了花飞飞和小辣椒的，在此致谢！
我是个没有基础的老太太，想学会是不可能的，只能照抄大家的，请各位见谅！玩了这么久，我连帖子的上下边距都没搞掂{:5_117:}！
真好，做了歌词同步的帖子，而且歌曲是自己演唱的，这样的帖子好{:4_199:} 右侧还有个动图，有趣。
下次被跟唱了，自己唱多好啊{:4_199:} 演绎精彩 歌声唯美 制作大气~演绎精彩，好棒哦，辛苦了！ 偶然~ 发表于 2025-8-17 15:06
制作大气~演绎精彩，好棒哦，辛苦了！
谢谢您的鼓励和支持。 偶然~ 发表于 2025-8-17 15:05
歌声唯美
谢谢您的鼓励和支持。
我是乱唱搞笑的，刷微信视频看见有说唱歌对身体有好处，我就在全民K歌跟着唱。天生没有这个细胞。小学音乐课没及格过，所以从不敢唱。现来网络乱唱，没人认得，不害怕了就慢慢能跟唱一点了{:5_106:}。到老了每天乱玩，也玩出了一点自信。 红影 发表于 2025-8-14 20:54
右侧还有个动图，有趣。
下次被跟唱了，自己唱多好啊
谢谢红管的鼓励和支持！会唱就不跟唱。{:5_106:}没有基础，人老了学东西也难，不想花太多时间唱一首歌。达到养生的目的就行了。{:5_106:} 红影 发表于 2025-8-14 20:54
右侧还有个动图，有趣。
下次被跟唱了，自己唱多好啊
不是动图，是视频，用豆包AI 把我年轻时的照片做的一个视频。现在老了没事做，每天玩微信、K歌、学AI、来这里学网页代码，目的都是养生（当然也是自己的爱好），不喜欢外出，只能这样活法了！ 寒冬残荷 发表于 2025-8-17 21:50
谢谢红管的鼓励和支持！会唱就不跟唱。没有基础，人老了学东西也难，不想花太多时间唱一首歌。 ...
嗯嗯，唱歌对身体还是很有好处的，对心情也好{:4_187:} 寒冬残荷 发表于 2025-8-17 21:54
不是动图，是视频，用豆包AI 把我年轻时的照片做的一个视频。现在老了没事做，每天玩微信、K歌、学AI、来 ...
原来回思您年轻时的照片做的视频啊，您可真漂亮{:4_199:}
页:
[1]