苦了累了听听歌 歌手： 余晓清 （学习套用黑黑斯兰·天女散花播放器效果）
<style>
#mydiv { margin: 150px 0 30px calc(50% - 781px); width: 1400px; height :780px; background: url('https://xlaj.cn/upfile/202411/17/001.jpg') no-repeat 0/cover; border: thick inset DarkOrchid; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }
.vid { position: absolute; object-fit: cover; }
.vid:nth-of-type(1) { bottom: 0; width: 100%; height: calc(100% + 0px); transform: rotateX(180deg) rotateY(180deg); mix-blend-mode: darken; }
.vid:nth-of-type(2) { top: 250px; left: 520px; width: 120px; height: 120px; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 0 50px snow); transform-origin: 50% 100%; transition: 2s; }
.vid:nth-of-type(2):hover { transform: scale(1.5); }
#dt2{ position: absolute; width:32px; height: 32px; top: 120px; left: 100px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 247px; left: 925px; }
#dt4{ position: absolute; width: 400px; height: 220px; top: 55px; left: 900px; }
#dt5{ position: absolute; width: 10px; height: 10px; top: 210px; left: 225px; }
#dt8{ position: absolute; width:380px; height: 250px; top: 140px; left: 1000px; }
</style>
<div id="mydiv">
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt4" src="https://xlaj.cn/upfile/202411/12/4n.gif " alt="" />
<img id="dt5" src="https://xlaj.cn/upfile/202411/12/4n.gif " alt="" />
<img id="dt6" src="https://xlaj.cn/upfile/202410/13/lanhd.gif" alt="" style=" position: absolute; width: 30px;height: 28px;top: 480px;left: 1050px;"/>
<img id="dt7" src="https://xlaj.cn/upfile/202410/13/hd.gif" alt="" style=" position: absolute; width: 30px;height: 26px;top: 520px;left: 950px;"/>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/3d34-audiofreehighqps/36/95/GAqhjg0LC9mgACAAAAMvcl7r.m4a" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/30/45/62bac706237f8.mp" loop muted disablePictureinPicture></video>
<video class="vid" id="vbtn" src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bde6a1eca.mp4" autoplay loop muted disablePictureinPicture></video>
</div>
<script>
(function() {
const sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: lrcAr,
btn: '#vbtn',
lrc_css: 'left: 35%; top: 85%;font-size: 2.0em; transform: translate(-50%); color: rgba(240,255,255,.5); --bg: linear-gradient(rgba(0,255,255,.4), rgba(0,255,255,.6))',
});
};
mydiv.oncontextmenu = (e) => e.preventDefault();
const lrcAr = [['0.00', '苦了累了听听歌 - 余晓清',10.07],
['10.60', '词：余晓清',5.74],
['16.64', '曲：余晓清',4.29],
['21.16', '出品：余乐文化 ',7.18],
['31.82', '人生就像一条长河',3.03],
['36.75', '深深浅浅我们走过',3.01],
['40.55', '酸甜苦辣样样都尝过',3.12],
['44.36', '成败得失别计较太多',3.14],
['48.30', '人生就像一首诗歌',3.01],
['52.10', '写满人间悲欢离合',3.02],
['55.91', '人间美景不容去错过',3.11],
['59.71', '恩恩怨怨一笑而过',3.05],
['63.55', '困了累了可以听听歌',3.19],
['67.43', '歌声能够带走寂寞',3.05],
['71.27', '别再让痛苦把自己折磨',3.15],
['75.01', '每天都要开心地活',3.04],
['78.95', '苦了累了可以唱唱歌',3.13],
['82.77', '唱出心中喜怒哀乐',3.00],
['86.66', '闲看庭前花开花落',3.08],
['90.43', '一生过得洒洒脱脱',3.03],
['94.36', '。。。。。。',29.20],
['125.10', '人生就像一条长河',3.03],
['128.92', '深深浅浅我们走过',3.08],
['132.79', '酸甜苦辣样样都尝过',3.17],
['136.55', '成败得失别计较太多',3.11],
['140.46', '人生就像一首诗歌',3.06],
['144.31', '写满人间悲欢离合',3.04],
['148.14', '人间美景不容去错过',3.19],
['151.92', '恩恩怨怨一笑而过',3.07],
['155.78', '困了累了可以听听歌',3.17],
['159.64', '歌声能够带走寂寞',3.01],
['163.44', '别再让痛苦把自己折磨',3.18],
['167.31', '每天都要开心地活',3.00],
['171.10', '苦了累了可以唱唱歌',3.16],
['174.95', '唱出心中喜怒哀乐',3.06],
['178.80', '闲看庭前花开花落',3.03],
['182.62', '一生过得洒洒脱脱',3.02],
['186.43', '困了累了可以听听歌',3.13],
['190.36', '歌声能够带走寂寞',3.01],
['194.16', '别再让痛苦把自己折磨',3.11],
['198.06', '每天都要开心地活',3.00],
['201.95', '苦了累了可以唱唱歌',3.16],
['205.70', '唱出心中喜怒哀乐',3.03],
['209.52', '闲看庭前花开花落',3.05],
['213.36', '一生过得洒洒脱脱',3.01],
['217.27', '谢谢欣赏',4.39],
['249.26', '',4.5]
];
})();
</script>
@马黑黑
黑黑，好多前面分享的教程没有学习也是没有完成作业，今天套用一个（斯兰·天女散花）的效果，我就用了一个视频制作播放器，还有一个视频没有用，感觉这个视频播放器特别漂亮{:4_189:} 谢谢黑黑源码分享{:4_187:} 这歌曲，这画面，就给人一种潇洒浪漫的感觉，看着画面，听着歌曲，就不累啦。 梦油 发表于 2024-11-16 14:53
这歌曲，这画面，就给人一种潇洒浪漫的感觉，看着画面，听着歌曲，就不累啦。
谢谢梦油欣赏，小辣椒太多作业没有完成了，都不好意思了 http://5b0988e595225.cdn.sohucs.com/images/20180609/f85bb2266e7e495d8a8203f3e12af903.gif
起个网名好难 发表于 2024-11-16 15:22
难难好，谢谢欣赏和支持{:4_187:} 完美 困了累了也来听听歌，愉快心情流成河。。。。{:4_205:} 这歌很对胃口，简洁明了，要要乐感很好才行，还是高音呢{:4_203:} 小辣椒 发表于 2024-11-16 15:02
谢谢梦油欣赏，小辣椒太多作业没有完成了，都不好意思了
欣赏你的作品是一种快乐。 这画面真美，小蝴蝶还有雁和小星星的动态点缀都很漂亮。
歌曲也好听，看看这样的帖子心情真好{:4_187:} 亲爱的ps制作好，让帖子更出彩。欣赏亲爱的好帖{:4_199:} 很喜欢这种颜色的画面，欣赏老师带来的精彩音画。{:4_187:} 问候老师好！精美音画佳作，精心制作分享。为您点赞！{:5_116:}{:4_204:}。{:5_108:}
页:
[1]