把酒煮人生-- 贺大猫咪生日快乐！
本帖最后由 冬天的雨 于 2024-7-13 10:41 编辑 <br /><br /><style>#mydiv { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 780px; background: url('https://cccimg.com/view.php/1fa117eff2cb526e97b93575ef488eb2.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
#mydiv::after {content: attr(data-lrc); position: absolute; bottom: 30px; width: 100%; height: 60px; text-align: center; font: normal 45px/60px \9ED1\4F53; color: transparent;text-shadow: 1px 1px 1px #138b79;background: radial-gradient(pink, white, Salmon) center/120px 60px; -webkit-background-clip: text;}
#mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 11px, transparent 12px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(180deg, hsl(31,100%,50%), hsl(51,100%,50%), hsl(71,100%,50%), hsl(178,100%,50%), hsl(234,100%,82%)); mix-blend-mode: color-dodge; animation: chg 6s linear infinite var(--state); }
#player { position: absolute; left: 10%; top: 80%; width: 120px; filter: hue-rotate(320deg); z-index: 10; transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(240deg); }
#vid { position: absolute; left: -200px; top: -100px; opacity: .3; width: 80%; height: 50%;transform: rotate(20deg); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }
#pic { position: absolute; width: 293px; height: 312px;bottom: 50%; left: 20%; transform-origin:center bottom;transform: rotate(180deg); animation: hy 1.2s infinite alternate ;}
@keyframes hy { from { opacity: 0.6; transform: rotate(-1deg); }to { opacity: .25; transform: rotate(2deg); }}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes chg { to { inset: -60px; } }
</style>
<div id="mydiv" class="mydiv" data-lrc="HUACHAO">
<audio id="aud" src="https://cccimg.com/view.php/0483f21807aeaeba2553d49b0a53fbb1.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec494a494d82.mp" autoplay loop muted></video>
<img id="player" alt="" src="https://wimg.588ku.com/gif620/21/09/27/08fff79991ac86e1185e81126210fc80.gif" titel="播放/暂停" />
<img id="pic" alt="" src="https://cccimg.com/view.php/43f0197a16a159677332165f70343c94.gif " />
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: 100px; left: 50%; transform: translate(-50%); --color: rgba(32,178,170.5); --fsBg: transparent;',
});
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
mydiv.dataset.lrc = lrcAr;
curkey ++;
}
};
var lrc = `把酒煮人生
贺兄弟生日快乐
谁来与我同赏黄昏
谁来与我把酒温
风雨路上谁相陪
潦倒新停浊酒杯
谁在拭我相思泪
谁在与我梦前尘
月洒西楼情寄风
谁来与我同慰落花痕
啊人生啊人生就是一杯浓浓的酒
红尘啊红尘就是一曲淡淡的愁
敬一杯烟火的岁月悠悠
牵手时光留住那份邂逅
啊人生啊人生就是一杯浓浓的酒
红尘啊红尘就是一曲淡淡的愁
谁的骏马在余辉中放纵
谁在煮酒寒风共偎温柔
谁在煮酒寒风共偎温柔
贺兄弟生日快乐
谁在拭我相思泪
谁在与我梦前尘
月洒西楼情寄风
谁来与我同慰落花痕
啊人生啊人生就是一杯浓浓的酒
红尘啊红尘就是一曲淡淡的愁
敬一杯烟火的岁月悠悠
牵手时光留住那份邂逅
啊人生啊人生就是一杯浓浓的酒
红尘啊红尘就是一曲淡淡的愁
谁的骏马在余辉中放纵
谁在煮酒寒风共偎温柔
谁在煮酒寒风共偎温柔
啊人生啊人生就是一杯浓浓的酒
红尘啊红尘就是一曲淡淡的愁
敬一杯烟火的岁月悠悠
牵手时光留住那份邂逅
啊人生啊人生就是一杯浓浓的酒
红尘啊红尘就是一曲淡淡的愁
谁的骏马在余辉中放纵
谁在煮酒寒风共偎温柔
谁在煮酒寒风共偎温柔
祝兄弟工作顺利 事业有成！
`;
getAr(lrc);
</script>
<br><br><br><br><br> 猫猫生日快乐！{:4_177:}{:4_191:}{:4_176:} @小辣椒
进来一起贺猫猫生日，今天正日子，喝酒，吃蛋糕了{:4_170:} @大猫咪
猫猫冬雨现在做不好帖，这个代码是小辣椒给的，我就照抄做一个，不要嫌弃
这个漂亮，代码小点点，让整个背景很漂亮，那个蛋糕还是摇动的，吸引着人赶紧吃一口{:4_173:} 欣赏冬小雨好帖，同祝猫猫生日快乐{:4_177:} 红影 发表于 2024-7-13 10:27
这个漂亮，代码小点点，让整个背景很漂亮，那个蛋糕还是摇动的，吸引着人赶紧吃一口
美女好久不见了，猫咪生日是你请客，一起吃大餐去，蛋糕这里有了，大蛋糕，够吃了{:4_170:} 红影 发表于 2024-7-13 10:27
欣赏冬小雨好帖，同祝猫猫生日快乐
呼叫猫咪，，，，，生日快乐！{:4_204:}{:4_197:}{:4_185:}{:4_179:} 冬雨朋友的这份贺礼太美了。我很高兴和冬雨朋友一起祝福大猫咪生日快！ 好漂亮的生日礼物，呼喊大猫咪收礼开心。{:4_187:}{:4_187:}{:4_176:}{:4_176:} 蛋糕我喜欢的{:4_170:} 冬天的雨 发表于 2024-7-13 10:38
美女好久不见了，猫咪生日是你请客，一起吃大餐去，蛋糕这里有了，大蛋糕，够吃了
哈哈，这个蛋糕还会跳舞呢，快乐的蛋糕{:4_173:} 冬天的雨 发表于 2024-7-13 10:39
呼叫猫咪，，，，，生日快乐！
跟冬小雨一起祝福猫猫{:4_187:} 谢谢冬雨兄弟，制作太漂亮了，图美歌靓，真开心！友情是酒，愈陈愈香，感受到了温暖和安慰。。
来走2个{:4_191:}{:4_176:}
祝冬雨兄弟：健康快乐开心，幸福永远!
{:4_179:}{:4_191:}{:4_176:}{:4_178:}{:4_199:} 冬天的雨 发表于 2024-7-13 10:20
@大猫咪
猫猫冬雨现在做不好帖，这个代码是小辣椒给的，我就照抄做一个，不要嫌弃
开心都来不及，太棒了 谢谢兄弟祝福！ {:4_179:}{:4_204:}{:4_191:} 梦油 发表于 2024-7-13 10:46
冬雨朋友的这份贺礼太美了。我很高兴和冬雨朋友一起祝福大猫咪生日快！
谢谢梦兄，又你真好！{:4_179:} 一起开心每一天！
{:4_204:}{:4_191:}{:4_199:}{:4_178:} 红影 发表于 2024-7-13 10:27
欣赏冬小雨好帖，同祝猫猫生日快乐
谢谢红影{:4_173:}真开心让猫心中挂满甜蜜{:4_179:}{:4_191:}{:4_176:}{:4_204:} 小九 发表于 2024-7-13 11:18
好漂亮的生日礼物，呼喊大猫咪收礼开心。
来了来了下九 开心收礼 {:4_173:}浓浓的温馨和幸福{:4_179:}{:4_191:}{:4_178:}{:4_199:} 辫子哥哥 发表于 2024-7-13 11:49
蛋糕我喜欢的
和辫子哥哥哥哥一起品尝 {:4_173:}{:4_179:}{:4_191:} 大猫咪 发表于 2024-7-13 14:30
谢谢红影真开心让猫心中挂满甜蜜
这个标题也有趣，把酒煮人生，这样的人生醉醺醺晕乎乎地也不错，可以更快乐{:4_173:}
页:
[1]
2