【生日答谢】《人生路上感谢有你》
<style>#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 670px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://pic.imgdb.cn/item/6598b119871b83018a1aec5a.jpg') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(185,213,133,.95); position: relative; display: grid; place-items: center; z-index: 1; }
#rili { padding: 6px; top: 60px; left: 10px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: snow; box-sizing: border-box; user-select: none; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(188,127,21,.25); display: grid; place-items: center; font: bold 2em sans-serif; }
#iRed { position: absolute; color: red; transition: .5s; }
#iRed:hover { font-size: 32px; font-weight: bold; } .tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; }
.imgBox { --w: 140px; --h: 450px; position: absolute; width: var(--w); height: var(--h);transform-style: preserve-3d; animation: rotate 45s linear infinite;left:550px;top:100px; }
.imgBox img { width: var(--w); height: var(--h); position: absolute; }
.imgBox:hover { animation-play-state: paused; cursor: pointer; }
@keyframes rotate { 100% { transform: rotateY(-360deg); } }
#hy{ color: #00ff00; position: absolute; left:30%;top:5%;font-size: 40px; font-family:华文隶书;z-index: 21; animation: wz 10s linear infinite ; filter:drop-shadow(LightPink 1px 0 0)drop-shadow(LightPink 0 1px 0)drop-shadow(LightPink -1px 0 0) drop-shadow(LightPink 0 -1px0);cursor: pointer;}
.stop #hy{animation-play-state: paused;}
@keyframes wz { 50% {opacity: 1; left: 40%; }}
#klok{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(90deg, #ff0000 20%, #00ff80 50%, #fff000 10%, #000078 50%,#fff000 60%,#000080 70%,#00ff00 20%);
background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
-webkit-animation:loop 3slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -300px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</style>
<div id="papa"> <div class="imgBox"></div> <div id="hy"><div id="klok">感谢朋友们的温馨祝福</div></div>
<div id="rili" ></div>
</div>
<script>
(function() {
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let player = new ypP();
player.setAudSrc('https://music.163.com/song/media/outer/url?id=1379416500');
player.setBtnCss(`
width: 300px; height: 4px;
bottom: 60px;
--btnBg: url('https://pic.imgdb.cn/item/6598cb48871b83018a695bb2.png') no-repeat center/cover;
--trackBg: linear-gradient(to right, rgba(165, 188, 217, .35), rgba(175, 210, 253, 0.25), rgba(165, 188, 217, 0.25));
--progBg: #d0320b;
--btnSize: 45px;
`);
player.setLrcCss('top: 620px; color: #FFF8DC; --bg: Red; font:bold 1.6em serif; filter:drop-shadow(1px 1px 1px#999);');
player.lrcAr = [
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
};
let picAr = [
"https://pic.imgdb.cn/item/659aa3f7871b83018a53c6ef.png",
"https://pic.imgdb.cn/item/659aa5f5871b83018a60203b.png",
"https://pic.imgdb.cn/item/659aa6a1871b83018a645548.png",
"https://pic.imgdb.cn/item/659aa8b6871b83018a7122bf.png",
"https://pic.imgdb.cn/item/659aa8d9871b83018a71de75.png",
"https://pic.imgdb.cn/item/659aa8f5871b83018a727142.png",
"https://pic.imgdb.cn/item/659aaafa871b83018a7cd33b.png",
"https://pic.imgdb.cn/item/659aab21871b83018a7d9521.png",
"https://pic.imgdb.cn/item/659aab44871b83018a7e5297.png",
"https://pic.imgdb.cn/item/659aadf8871b83018a8d56ab.png",
"https://pic.imgdb.cn/item/659aae16871b83018a8dfa67.png",
"https://pic.imgdb.cn/item/659aae37871b83018a8ea2e6.png",
"https://pic.imgdb.cn/item/659ab01b871b83018a9873eb.png",
"https://pic.imgdb.cn/item/659ab049871b83018a994fa6.png",
"https://pic.imgdb.cn/item/659ab065871b83018a99dd9d.png",
];
let iBox = document.querySelector(".imgBox");
let hStr = "";
let angle = 360 / picAr.length;
let tz = Math.tan(Math.PI / 180 * (180 - angle) /2 ) * iBox.clientWidth / 2;
for(j=0; j<picAr.length; j++) {
hStr += `<div style="transform: rotateY(${angle*j}deg) translateZ(${tz}px);"><img alt="" src="${picAr}"
/></div>\n`;
}
iBox.innerHTML = hStr;
(function () {
let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
let output = ar.join('');
let y = new Date().getFullYear(), m = new Date().getMonth();
let days = new Date(y, m+1, 0).getDate();
let day1st = new Date(y, m).getDay();
let today = new Date().getDate();
Array.from({length: days + day1st}).forEach((item,key) => {
let idx = key < day1st ? '' : (key - day1st + 1);
if(idx == today) idx = `<span id="iRed">${idx}</span>`;
output += `<div class="tbox">${idx}</div>`;
});
rili.innerHTML = output;
rili.dataset.bg = `${y}年${m+1}月`;
})();
})();
</script> 樵山戴月归，歌声满岭飞。桃源仙境隐，流水绕柴扉。
把师兄向往的休闲生活展示得淋漓尽致，弄得人间仙境似的，到时师兄在里面修行成老妖怪{:4_170:} 感谢各位朋友的生日祝福，感谢送我帖子的朋友，也谢谢跟帖祝福的朋友，还有QQ微信上祝福我的朋友们，有你们的美好祝福，这个冬天很温暖{:4_187:} 将朋友们的祝福帖收集起来，留作以后岁月的回味（按发帖时间），并每人回赠藏头小诗一首以表达谢意。
1、樵歌赠礼
【东风齐著力】 贺红影芳辰（1月7日）
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73342
影子回礼：@樵歌
樵山戴月归，歌声满岭飞。桃源仙境隐，流水绕柴扉。
2、冬天的雨赠礼
美丽的神话 TO：红影芳辰快乐 （马老师老屋后山林学习帖）
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73344
影子回礼：@冬天的雨
冬日寒霜覆，天寒梅欲开。的的马蹄响，雨霁故人来。
11、冬天的雨所赠第二份礼
红影美女生日快乐！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73433
3、小九赠礼
【满庭香】贺红影生辰！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73350
影子回礼：@小九
小饮消孤寂，九原丘陇苍。抚灰心淡雅，花影映书堂。
（注：九儿家的猫儿名叫灰哥）
4、千羽赠礼
【羽图】《休闲时光》致红影：祝生日快乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73353
影子回礼：@千羽
千金凭一曲，羽裳舞花香。灵思描画卷，巧手织春光。
5、醉美水芙蓉赠礼
祝红影生日快乐！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73355
影子回礼：@醉美水芙蓉
醉中聆妙曲，美韵心情舒。水畔风光好，芙蓉红锦铺。
6、东篱闲人赠礼
今天是个好日子 贺红影生日快乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73356
影子回礼：@东篱闲人
东园清净地，篱畔菊芬芳。闲饮陶潜韵，人间自在郎。
7、小辣椒赠礼
喜欢你 TO：红影芳辰快乐！（学习黑黑老屋后山林效果）
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73384
影子回礼：@小辣椒
小帖明世理，辣笔讽嚣尘。椒阁聪慧女，红尘飘逸人。
12、小辣椒所赠第二份礼
一首矜持 送给红影祝生日快乐！永远快乐！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73436
8、岁月·如歌赠礼
静夜花语 - 红影生日快乐！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73386
影子回礼：@岁月·如歌
岁岁迷音画，月明妙韵飘。如飞仙境里，歌舞伴终朝。
9、香染赠礼
天涯向晚 @红影 贺芳辰
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73404
影子回礼：@香染
香风伴美人，染遍几枝春。更有生花笔，描来万象新。
10、上海朝阳赠礼
《手心里的温柔》@红影姑娘
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73417
影子回礼：@上海朝阳
上善常如水，海般心境宽。朝朝歌韵美，阳光洒满天。
13、大猫咪赠礼
最美的祝福送给红影 ：生日快乐！
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73437
影子回礼：@大猫咪
大爱护狸奴，猫儿待遇殊。咪咪得安稳，昵称富贵呼。
（注：猫猫家的猫儿名叫大富贵）
14、辫子哥哥赠礼
梨花飞情人泪 送给情人 贺生辰
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73438
影子回礼：@辫子哥哥
辫发彰个性，子敲棋势惊。哥本仙界客，哥岂凡间行。
15、梦油赠礼
芳辰薄礼 恭请笑纳
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73443
影子回礼：@梦油
梦影徘徊处，油然隐者心。人生多少幻，何必费沉吟。
16、自励赠礼
1月7日到了，我赶来祝影子生日快乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73445
影子回礼：@自励
自定乾坤事，励精图治情。史中通蹇辨，卷里是非明。
17、亦是金赠礼
祝红影18芳辰快乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=73451
影子回礼：@亦是金
亦知浮世幻，是处若虚空。金谷春何在，繁华总似风。
图中也放了给各位的回礼。鼠标移动上去图图可以停止，便于仔细欣赏，鼠标离开后，图图会继续旋转{:4_173:} 急着在今天发，是因为那日历上正好显示是7号。为了在今天回礼，忙乎挺长时间，但心里是快乐的。
感谢大家，请大家吃蛋糕喝美酒，一起快乐{:5_166:}{:4_191:} 也很感谢黑黑的代码，没有代码什么都做不起来呢。谢谢黑黑@马黑黑 {:4_187:} 因为做藏头诗，受文字限制，只能按字面的组合来凑了，只是些打油句子，没法表达出朋友们的特点。
每个人按自己的收吧。再次感谢朋友们{:4_187:} 非常漂亮的一大组答谢藏头诗！{:4_178:} 嵌字无痕，与立意组词流畅，还根据每个人的名字和特长，统统都在一首绝里表现出来，这功夫要把我等凑古韵的丢几条街了。而且在很短的时间里写出来。这才思好生敏捷！{:4_187:} 有三个最难的马甲：冬天的雨、辫子哥哥、大猫咪，都特别难以用来写藏头的，可都巧妙的而灵动地写出了他们的特点！ 大爱护狸奴，猫儿待遇殊。咪咪得安稳，昵称富贵呼。
这样妙，师兄肯定写不出来{:4_173:} 冬日寒霜覆，天寒梅欲开。的的马蹄响，雨霁故人来。
这首也特别契合时令，意境相当丰满！非常喜欢！ 红影 发表于 2024-1-7 23:28
也很感谢黑黑的代码，没有代码什么都做不起来呢。谢谢黑黑@马黑黑
{:4_191:} 红影 发表于 2024-1-7 23:36
因为做藏头诗，受文字限制，只能按字面的组合来凑了，只是些打油句子，没法表达出朋友们的特点。
每个人按 ...
诚心诚意、制作精美。才女，才女！{:4_199:} 这答谢帖真棒！红影同志己经练成诗.书.画全才了！{:4_199:}电脑还没修好，不习惯手机，待两日后再上来细细欣赏！ 太美了，这么高级的制作{:4_178:}{:4_178:}{:4_178:} 美女，这个太厉害了，制作好漂亮，旋转的屏风，上面还有诗词，真的太漂亮了