肩上扛着一个家

杨帆发表于 2025-7-8 17:28

本帖最后由杨帆于 2025-7-9 22:39 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>肩上扛着一个家 - 青冉</title>
</head>
<body>
<style>
#mama { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/6851adfb58cb8da5c855fcde.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running;}
video, .vid { position: absolute; width: 100%; height: 100%; left:0%;top: 0%;object-fit: cover; pointer-events: none; opacity: .8;}
.vid {mix-blend-mode:unset;mask: radial-gradient(transparent 25%, red); -webkit-mask: radial-gradient(transparent 25%, red); z-index: 2; }
.pTitle { width: 50%; height: 20%; line-height: 2em; color: transparent; font-family: STLiti, NSimSun, 'Microsoft YaHei'; font-size: 50px; font-weight: bold; text-align: center; margin: auto; z-index: 5; position: absolute; left: 5%; top: 5%; }
.sp { animation: flashTitle 8s linear infinite var(--state); }
.pTitle span:nth-child(1) { animation-delay: 0s; }
.pTitle span:nth-child(2) { animation-delay: 0.5s; }
.pTitle span:nth-child(3) { animation-delay: 1.0s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s; }
.pTitle span:nth-child(5) { animation-delay: 2.0s; }
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3.0s; }
@keyframes flashTitle { 0%, 100% { color: white; text-shadow: 2px 2px 20px coral, 2px 2px 30px Orange, 2px 2px 40px Orange, 2px 2px 50px Orange, 2px 2px 60px Orange, 2px 2px 70px Orange, 2px 2px 80px coral; } 50%, 90% { color: transparent; text-shadow: none; } }
@keyframes flashing { 0% { filter: brightness(.8); } 100% { filter: brightness(1.2); } }
#player { position: absolute; width: 200px; height: 200px; filter: drop-shadow(-200px 100px 20px black);left: 30px; bottom: 30px; perspective: 800px;z-index: 5; transform-style: preserve-3d; }
#player:hover { perspective: 300px;filter: drop-shadow(6px 6px 40px black) hue-rotate(130deg); --state: paused; }
.sdiv { position: absolute; width: 200px; height: 200px; background: url('https://638183.freep.cn/638183/small/fi1.webp') no-repeat center/cover; cursor: pointer;filter: drop-shadow(0 0 60px black); transform: rotateX(45deg) rotateY(-15deg) rotateZ(0); animation: rot3d 6s linear infinite var(--state); }
@keyframes rot3d { to { transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg); } }
</style>

<div id="mama">
<div id="player">
   <div class="sdiv"></div>
</div>

<audio id="audioPlayer" src="https://file.uhsea.com/2507/7f84d3192482464d0bff10dbb14e31caQR.mp3" autoplay loop></audio>

<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/07/17/17/27/27/video66978e7fb1c4d.mp4" autoplay loop muted></video>

<video src="https://video-qn.51miz.com/preview/video/00/00/65/26/V-652636-1D4CC24F.mp4" autoplay loop muted></video>

<div class="pTitle">
   <span class="sp">肩</span>
   <span class="sp">上</span>
   <span class="sp">扛</span>
   <span class="sp">着</span>
   <span class="sp">一</span>
   <span class="sp">个</span>
   <span class="sp">家</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const audioPlayer = document.getElementById('audioPlayer');
const playerBtn = document.querySelector('#player');
const mama = document.getElementById('mama');

playerBtn.addEventListener('click', function() {
   if (audioPlayer.paused) {
         audioPlayer.play();
         mama.style.setProperty('--state', 'running');
   } else {
         audioPlayer.pause();
         mama.style.setProperty('--state', 'paused');
   }
});

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/yslrc_133703119608822812.js';
document.body.appendChild(sf);

sf.onload = () => {
   HCPlayer({
         papa: '#mama',
         geci: geci,
         skip: 0,
         average: 0,
         btnplay: '#player',
         lrc_css: 'left: 50%; bottom: 48px;font: 55px/45px STXingkai;color: lightblue;transform: translateX(-50%);',
         fs_css: 'right:-20px;top:18px; transform: translateX(-50%); --bg: transparent; --color: yellow',
   });
};
});

var geci = `
肩上扛着一个家-青冉
词：沧桑
曲：王曲山
编曲：kuka@乐人填梦
OP：南京开枝散叶
命运由不得自己来选
出身就注定输了一半
可是这样就认了命
我心有不甘
我知道我背后没靠山
一路走来会步步都难
可我来人间走这一趟
不想遗憾
出身贫寒傲骨被压弯
可我吃的苦没换来甜
为讨三餐饭
不得不放下尊严
出身贫寒一身傲骨被压弯
任凭岁月风霜吹痛我的脸
肩上扛着一个家再苦再难
不敢怠慢
我单枪匹马闯荡人间
回首半生苦累自己咽
我知道出身寒门
很难逆风翻盘
我知道我背后没靠山
一路走来会步步都难
可我来人间走这一趟
不想遗憾
出身贫寒傲骨被压弯
可我吃的苦没换来甜
为讨三餐饭
不得不放下尊严
出身贫寒一身傲骨被压弯
任凭岁月风霜吹痛我的脸
肩上扛着一个家再苦再难
不敢怠慢
我单枪匹马闯荡人间
回首半生苦累自己咽
我知道出身寒门
很难逆风翻盘

`;
</script>
</body>
</html>

红影发表于 2025-7-8 18:52

这个是专门为送水的人写的歌吧。听着这样的歌曲，很感慨。每个人都不容易{:4_187:}

红影发表于 2025-7-8 18:53

闪烁的标题字还有最新播放器的运用都很漂亮。
欣赏杨帆好帖{:4_199:}

杨帆发表于 2025-7-8 19:08

本帖最后由杨帆于 2025-7-8 19:36 编辑

红影发表于 2025-7-8 18:53
闪烁的标题字还有最新播放器的运用都很漂亮。
欣赏杨帆好帖
谢谢影子鼓励！该贴有视频水印吗？

梦油发表于 2025-7-8 20:03

男人不容易啊！

红影发表于 2025-7-8 21:18

杨帆发表于 2025-7-8 19:08
谢谢影子鼓励！该贴有视频水印吗？

视频没有水印，挺好的，和歌曲特别相符{:4_187:}

杨帆发表于 2025-7-8 21:27

梦油发表于 2025-7-8 20:03
男人不容易啊！

是，男人的别名是责任

杨帆发表于 2025-7-8 21:28

红影发表于 2025-7-8 21:18
视频没有水印，挺好的，和歌曲特别相符

知道了，谢谢，祝开心天天{:4_187:}

红影发表于 2025-7-8 21:51

杨帆发表于 2025-7-8 21:28
知道了，谢谢，祝开心天天

不客气啊，再商杨帆好帖{:4_187:}

梦油发表于 2025-7-9 13:52

杨帆发表于 2025-7-8 21:27
是，男人的别名是责任

是啊，男人有责任，有担当，是一个家庭的支柱。

梦江南 发表于 2025-7-9 15:28

欣赏杨帆佳作，为底层老百姓呼吁。{:4_187:}

梦江南 发表于 2025-7-9 15:32

我看到视频中间有“千库网”字样。

杨帆发表于 2025-7-9 22:33

本帖最后由杨帆于 2025-7-9 22:34 编辑

梦江南发表于 2025-7-9 15:32
我看到视频中间有“千库网”字样。
是吗？我这儿看着正常呀，我再处理一下

杨帆发表于 2025-7-9 23:21

梦江南发表于 2025-7-9 15:32
我看到视频中间有“千库网”字样。

江南好，已作处理，还有水印吗？

梦江南 发表于 2025-7-10 09:11

杨帆发表于 2025-7-9 23:21
江南好，已作处理，还有水印吗？

早上问好，这下视频没有水印，更加清晰了。{:4_199:}

杨帆发表于 2025-7-10 12:59

梦江南发表于 2025-7-10 09:11
早上问好，这下视频没有水印，更加清晰了。

好，谢谢江南，祝开心{:4_171:}

页: [1]

花潮论坛's Archiver

肩上扛着一个家