祝顾念生日快乐（5.24）
<style>
#papa { margin: 130px 0 20px calc(50% - 681px); width: 1200px; height: 660px; background: lightblue; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
.vid { position: absolute;width: 125%;height: 100%;right:-30px;object-fit: cover; pointer-events: none; z-index: 2;}
.vid:nth-of-type(2) { height: 180px; width: 300px; top: 40px; left: 700px; mix-blend-mode: screen; opacity: 1; z-index: 3; border-radius: 50%; filter: hue-rotate(50deg); opacity: .6;}
.star { position: absolute; left: 740px; bottom: 140px; height: 300px; width: 300px; cursor: pointer; animation: ani 1.5s linear infinite alternate var(--state); z-index: 6;mix-blend-mode: screen;opacity: .6; transform-origin: 50%10%;}
.star:nth-of-type(2) { left: 520px; bottom: 90px; height: 80px; width:80px; animation-delay: -.5s; mix-blend-mode: screen;opacity: .3;}
.star:nth-of-type(3) { left: 510px; bottom: 10px; height: 100px; width:100px; animation-delay: -1s; mix-blend-mode: screen;opacity: .1; }
@keyframes ani { from { transform: rotate(-10deg) ; opacity: .5; } to { transform: rotate(5deg) ;opacity: .9;} }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1976877610.mp3" autoplay loop></audio>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/f442066ad97d95760e491ebf9fd97d9f_preview.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/53950850/03/15/26/644dda3bf0efd_10s_big.mp4" loop muted></video>
<img class="star" alt="" src="https://pic.imgdb.cn/item/6657fdf8d9c307b7e91b528f.png" />
<img class="star" alt="" src="https://pic.imgdb.cn/item/66580414d9c307b7e920b232.png" />
<img class="star" alt="" src="https://pic.imgdb.cn/item/66580414d9c307b7e920b232.png" />
</div>
<script>
(function() {
const vids = document.querySelectorAll('.vid'), stars = document.querySelectorAll('.star');
aud.onplaying = aud.onpause = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach( vid => aud.paused ? vid.pause() : vid.play());
stars.forEach(star => star.title = aud.paused ? '点击播放' : '点击暂停');
};
stars.forEach(star => star.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let 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: '#papa',
lrcAr: geci,
btn: '.star',
lrc_css: 'left: 670px;bottom: 40px; --bg: #DB7093; color: #FFF8DC; font:bold 2.4em serif;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
];
</script> 最近比较忙，看到@素衣 的帖子，才知道错过顾念的生日，赶紧补个礼物。
祝@顾-念 生日快乐{:4_177:} 顾念喜欢玩无人机，让图中的小美女素衣发个无线波，就有无人机为顾念送来了生日蛋糕{:4_173:} 学习@马黑黑 的多视频和图片的联控效果，借鉴了@南无月 的帖子歌词引用。
谢谢两位{:4_187:}{:4_187:} 这个真的非常漂亮，红影姐姐花了很多的心思吧。 借红影精美贺帖祝福顾念朋友生日快乐！ {:4_204:}好漂亮的礼物，二姐有心了 {:4_199:} 红影 发表于 2024-5-30 14:20
学习@马黑黑 的多视频和图片的联控效果，借鉴了@南无月 的帖子歌词引用。
谢谢两位
影子构思创意十分巧妙，贴子效果绝美 。。
{:4_204:} 借影子美 贴，祝顾念生日快乐！~~{:4_187:} 愤怒的葡萄 发表于 2024-5-30 14:24
这个真的非常漂亮，红影姐姐花了很多的心思吧。
谢谢葡萄，只是套用代码呢，也不算花心思{:4_173:} 梦油 发表于 2024-5-30 14:38
借红影精美贺帖祝福顾念朋友生日快乐！
跟梦油一起祝福{:4_187:} 素衣 发表于 2024-5-30 14:47
好漂亮的礼物，二姐有心了
跟三妹一起祝福顾念生日{:4_187:} 马黑黑 发表于 2024-5-30 17:54
谢谢黑黑的代码{:4_187:} 南无月 发表于 2024-5-30 18:10
影子构思创意十分巧妙，贴子效果绝美 。。
正好把三个星星全变成生日元素，不多不少正好够用{:4_173:} 南无月 发表于 2024-5-30 18:11
借影子美 贴，祝顾念生日快乐！~~
跟月儿一起祝福他{:4_187:}
哈哈，不说谢谢了。
来到花潮就是温馨舒适的氛围，今天必须快乐！
感谢回贴祝福的各位！ 用无人机把点燃的蛋糕蜡烛挂机上高空，让所有人都来庆祝、仰望，师妹这个创作新颖！想象力奇特。
虽然过了生日，照样快乐! 这个创意很好！ 借用影的贴祝福顾念生日快乐！ 嗨皮嗨皮{:4_187:}{:4_176:}{:4_176:}{:5_166:}
页:
[1]
2