起个网名好难 发表于 2024-12-31 20:10

接福啦

<meta name="referrer" content="never">
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;--w:300px;}
#oBlk        {width:990px;height:910px;display: grid;background-color:hsl(240, 35%, 95%);
                place-items:center;position:relative;
                grid-template-rows:100%;margin:90px 0 40px calc(50% - 581px);
                grid-template-columns:80px 910px;
                padding:12px;background-color:hsl(0, 40%, 80%);
                overflow:hidden;border-radius:16px;
                box-shadow:4px 4px 10px black;
}
#imgHolder        {
                place-items:center;position:relative;
                grid-template-rows:33% 34% 33%;
                grid-template-columns:33% 34% 33%;
                margin:auto;background-color:hsl(0, 40%, 80%);
}
#imgHolder img        {width:var(--w);height:var(--w);object-fit:cover;float:left;margin:1px;}
        /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.5em 楷体;
                        pointer-events:none;width:1.5em;height:80%;
                        filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
                        writing-mode: vertical-rl;z-index:99;left:10px;top:10%;color:hsla(240,60%, 90%, 0.7);
        }
        .lrcShow::before {
                        writing-mode: vertical-rl;
        }
        @keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
        @keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
#mCtrl        {width:80px;height:80px;overflow:hidden;border-radius:50%;position:absolute;left:7px;bottom:7px;animation:rot 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
        <div id="lrc">
                <div class="lrcShow" data-lrc="接福啦"></div>
                <img src="https://p2.music.126.net/E8a4ce81QEH_Ma8FIcQcCg==/109951169325075088.jpg" id="mCtrl">
        </div>
        <div id="imgHolder">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLnETicc0XZpCdCcnjkfgwAQKuFEBZvg8Rqz5rvBJhXNicJzKErScWFsJw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLdCs0sJyibibpCMiaNwticiac4g1SCC71eVc10yS1SlCCFHPEL5DKyGrDsNA/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLKJw46TsDTD9AebnDqhfatDoPqrDl7GZbWIZAx3ztDEEa4jtic9hX6NA/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLocqO6mI9yoBv3eO34zERvJoAZk6EbibxcqO4IYPEcPMDuCbara7Gicxw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1TtsNEu3AvaYIia3N4szer3Sv1Yic37akmDcDXAX9GTE8Jctbh8icTVQuw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLccUl2KbcQMIX7B98PHf2Etiak3BibjXQjtibhap9ECI3X3Eh7yqVfAJEg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RL195tcCSzge9t1vrd3M4iakYqsB74icpRAnzZnGvU46Ftp565AdXRkWFQ/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLWfPvvYDJZpc60d63dztQvQv9joQxnicjC9EpEKIuvx0pbxytOwU3Y3g/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLfh7SovNhnJCe678DY1aYdmxYzTmzhZ1yTL7S36TNTIg6wZHFMYVEhw/640" alt="" />
        </div>
</div>
<script>
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
const pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1TMzjqkcCjvEsArqblc2B2ejvNK9UocBfB3ZxvnQFia0WruuwdKzovicg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1QuzjtedqJG4b0lhyjlicuSsNhYoeSmibLIeM6F5P4ibVYfV5zIcLf7S8A/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1TtsNEu3AvaYIia3N4szer3Sv1Yic37akmDcDXAX9GTE8Jctbh8icTVQuw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1kLOXzicT2Pe8icuzTFnaLJ3FRtRekySP6EOr3LvU4AJvLVgJpvFAwyKA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1ClGEsmwMAPtV1Jr7sNtN4dVhZaOa9fuKDSrXyVpGHeCz3DECQabV9Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1hcwWlb0odLicle9a3CqhA9SzD7INXffG2B2tgrn6nGhbu1cTUplpqRg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/ax9D1cPWz5XO5n07ibKeQMtficaZ1mJsh1k0UFyrPEq0r5IWtfQIcsYlBubibSjiciaw24l82h8YwyuBIjWSlcgzKDQ/640",
];
let imgObj = document.querySelectorAll('#imgHolder img');
const keyFrames = [
        [
                [
                        {offset: 0.0, opacity:0,transform:'scale(0.3)'},
                        {offset: 0.5, opacity:1,transform:'scale(1.05)'},
                        {offset: 0.7, opacity:1,transform:'scale(0.9)'},
                        {offset: 1.0, opacity:1,transform:'scale(1)'}
                ],
                [
                        {offset: 0.0, transform:'scale(1)'},
                        {offset: 0.25,transform:'scale(0.95)'},
                        {offset: 0.75,transform:'scale(1.1)'},
                        {offset: 1.0, opacity:0,transform:'scale(0.3)'}
                ]
        ],
        [
                [   
                        {offset:0, opacity:0, transform:'translateY(-30%)'},
                        {offset:1, opacity:1, transform:'translateY(0)'}
                ],
                [
                        {opacity:1, transform:'translateY(0)'},
                        {opacity:0, transform:'translateY(30%)'}
                ]
        ],
        [
                [
                        {offset:0, transformOrigin:'left bottom',transform:'rotate(-90deg)',opacity:0},
                        {offset:1, transformOrigin:'left bottom',transform:'rotate(0)', opacity:1}
                ],
                [
                        {offset:0, transformOrigin:'right bottom',transform:'rotate(0)', opacity:1},
                        {offset:1, transformOrigin:'right bottom',transform:'rotate(-90deg)', opacity:0}
                ]
        ],
        [
                [
                        {offset:0, transform:'perspective(400px) rotateX(90deg)',opacity:0 },
                        {offset:.4, transform:'perspective(400px) rotateX(-10deg)' },
                        {offset:.7, transform:'perspective(400px) rotateX(10deg)' },
                        {offset:1, transform:'perspective(400px) rotateX(0)', opacity:1 }
                ],
                [
                        {offset:0, transform:'perspective(400px) rotateX(0)', opacity:1},
                        {offset:1, transform:'perspective(400px) rotateX(90deg)', opacity:0}
                ]
        ],
        [
                [
                        {offset:0, transform:'translateY(1200px) scale(.7)',opacity:.7},
                        {offset:.8,transform:'translateY(0) scale(.7)', opacity:.7},
                        {offset:1, transform:'scale(1)', opacity:1}
                ],
                [
                        {offset:0, transform:'scale(1)',opacity:1},
                        {offset:.2,transform:'translateY(0) scale(.7)',opacity:.7},
                        {offset:1, transform:'translateY(700px) scale(.7)',opacity:.7}
                ]
        ],
        [        //        Roll in/out
                [
                        {offset:0, transform: 'translateX(-800px) rotate(-540deg)', opacity: 0 },
                        {offset:1, transform: 'translateX(0) rotate(0deg)', opacity: 1 }
                ],
                [
                        {offset:0, transform: 'translateX(0) rotate(0deg)', opacity: 1 },
                        {offset:1, transform: 'translateX(-1000px) rotate(-540deg)', opacity: 0 }
                ]
        ],
        [                       
                [        //        PuFF in/out
                        {offset:0, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 },
                        {offset:1, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 }
                ],
                       
                [
                        {offset:0, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 },
                        {offset:1, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 }
                ]
        ],
        [        //        scale-in/out-center
                [
                        {offset:0, transform: 'scale(0)', opacity: 1 },
                        {offset:1, transform: 'scale(1)', opacity: 1 }
                ],
                [
                        {offset:0, transform: 'scale(1)', opacity: 1 },
                        {offset:1, transform: 'scale(0)', opacity: 1 }
                ]
        ]
];
const EffectTiming =
[
        {
                duration: 2000,
                iterations: 1,
                delay: 0,
                fill: 'forwards'
        },
        {
                duration: 2000,
                iterations: 1,
                delay: 9000,
                fill: 'forwards'
        }
];
let aniObjs = ;

function chg_cur_pic() {
        let aniIdx = parseInt(Math.random() * keyFrames.length);
        let Idx = parseInt(Math.random() * pics.length);
        imgObj.src = pics;
       
        for(let i = 0; i < EffectTiming.length; i++)        {
                if(aniObjs)         aniObjs.cancel();
                aniObjs = imgObj.animate(keyFrames, EffectTiming);
        }
    aniObjs.onfinish = chg_cur_pic;
}
chg_cur_pic();
const lrctxt = `
接福啦-马潇潇

接福啦 接福啦
接福啦 接福啦
财神迎到家里面那
福到运到笑开颜那
前途无量每一年那
黄金万两好运连那
红红火火传福到
财源滚滚福星照
黄金满满喜迎来呀
财源广进舞花腰
鸿运当头福满堂
招财进宝多如潮
运势亨通福无边呀
福禄寿喜齐欢笑

`;
      
let opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=2125347832.mp3",
}

let lrcPlayer = new lrcPlayerY(opts);
        //        动态元素监测
        let runState = () => {
                lrcPlayer.mObj.paused
                        ? (mCtrl.style.setProperty('--rState','paused'), aniObjs.forEach(aniObj => aniObj.pause()))
                        : (mCtrl.style.setProperty('--rState','running'), aniObjs.forEach(aniObj => aniObj.play()));
        }
        //        歌曲、歌词 及 动态元素 启/停控制
        mCtrl.onclick = () => {
                lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
        }
        lrcPlayer.mObj.addEventListener('play', () => runState());
        lrcPlayer.mObj.addEventListener('pause', () => runState());
        lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>

梦油 发表于 2024-12-31 20:43

祝难难朋友和家人新年快乐！

小辣椒 发表于 2024-12-31 20:55

接福了，每天就是2025年了，希望新的一年大家都收获满满{:4_205:}

小辣椒 发表于 2024-12-31 20:56

欣赏难难漂亮的特效制作，每次都有不一样的效果，特别的棒！

小辣椒 发表于 2024-12-31 20:57

欣赏美帖，送美好的祝福{:4_205:}

起个网名好难 发表于 2024-12-31 20:59

梦油 发表于 2024-12-31 20:43
祝难难朋友和家人新年快乐！

<meta name="referrer" content="never" >
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/AiatPyc4VpoGStMSYWxicjcnicIlKJSmkiaB8GicIkKflVVCmBrK1iacuw77aickvpknYxsYSFjsnnAfEOib4YHCIIW8HQ/640" width='360' />

起个网名好难 发表于 2024-12-31 21:00

小辣椒 发表于 2024-12-31 20:55
接福了，每天就是2025年了，希望新的一年大家都收获满满

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

应景帖

起个网名好难 发表于 2024-12-31 21:02

小辣椒 发表于 2024-12-31 20:56
欣赏难难漂亮的特效制作，每次都有不一样的效果，特别的棒！


<meta name="referrer" content="never" >
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/AiatPyc4VpoGStMSYWxicjcnicIlKJSmkiaBqyCuPCIfGlEQnLXjDs28kbib0kYPcgVGLK9qPhMHRN9wKXPalFibAtKA/640?wxfrom=12&tp=wxpic&usePicPrefetch=1&wx_fmt=png" width='360' />

一岁一礼又一年风景，漫漫前路愿尽心尽兴

起个网名好难 发表于 2024-12-31 21:03

小辣椒 发表于 2024-12-31 20:57
欣赏美帖，送美好的祝福

所求皆如愿，所行皆坦途

红影 发表于 2024-12-31 21:17

很喜庆的帖子。谢谢难难的美好祝福，也祝福您新年快乐，万事如意{:4_187:}{:4_199:}

起个网名好难 发表于 2024-12-31 21:41

红影 发表于 2024-12-31 21:17
很喜庆的帖子。谢谢难难的美好祝福，也祝福您新年快乐，万事如意

归零 更新 重启 向上 凡是过往皆为序章 所有未来皆为可盼

秋思梦景 发表于 2025-1-1 08:37

问候老师新年好！精美新年音画佳作，精心制作分享。为您点赞！祝您新年快乐！

起个网名好难 发表于 2025-1-1 09:05

秋思梦景 发表于 2025-1-1 08:37
问候老师新年好！精美新年音画佳作，精心制作分享。为您点赞！祝您新年快乐！

<meta name="referrer" content="never" >
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/bar9nEGlnE9mJLE3pj32ZiazAHtO4ibib8PlZ7fveicmkGz0tCC5Pia9otdlD7O9DKF0Zy1Pr6NKiaibiadDj8wNqv89TA/640?wx_fmt=jpeg" width="640" />

梦江南 发表于 2025-1-1 09:07

https://pic1.imgdb.cn/item/6774880fd0e0a243d4ed450d.gif

起个网名好难 发表于 2025-1-1 10:56

梦江南 发表于 2025-1-1 09:07


2025，新年快乐，万事顺遂！

红影 发表于 2025-1-1 14:09

起个网名好难 发表于 2024-12-31 21:41
归零 更新 重启 向上 凡是过往皆为序章 所有未来皆为可盼

这话说得真好{:4_187:}
页: [1]
查看完整版本: 接福啦