2025我们一定要幸福
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#oBlk {
width:1540px;height:800px;background-position:top left;background-size:cover;
background-image:url(https://pic1.imgdb.cn/item/6770f577d0e0a243d4ec156e.jpg);
overflow:hidden;
position:relative;
border-radius:32px;
box-shadow:4px 4px 10px black;
margin:90px 0 40px calc(50% - 851px);
}
.pic {
width:270px;height:360px;
offset-path: path("M 1680 400 Q 1155 100 770 400 T -270 200 h -900");
offset-rotate: 0deg;
background-color:hsla(240, 50%, 80%, 0.7);
overflow:hidden; border-radius:32px;
box-shadow:3px 3px 6px black;
animation:sp 45s linear infinite forwards;
position:absolute; left:0px;top:0px;
transition: 1.2s;opacity:0.8;
}
.pic:nth-of-type(1) {animation-delay:0s;}
.pic:nth-of-type(2) {animation-delay:5s;}
.pic:nth-of-type(3) {animation-delay:10s;}
.pic:nth-of-type(4) {animation-delay:15s;}
.pic:nth-of-type(5) {animation-delay:20s;}
.pic:nth-of-type(6) {animation-delay:25s;}
.pic:nth-of-type(7) {animation-delay:30s;}
.pic:nth-of-type(8) {animation-delay:35s;}
.pic:nth-of-type(9) {animation-delay:40s;}
#processMeter {position: absolute; right:5%; bottom:25px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
@keyframes sp {from{offset-distance:0%} to{offset-distance:100%}}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.2em 微软雅黑;
pointer-events:none;
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);
bottom: 0px; left:30%;
}
.lrcShow::before {
color:transparent;
}
</style>
<div id="oBlk">
<img src="https://pic1.imgdb.cn/item/6770f604d0e0a243d4ec1599.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f695d0e0a243d4ec15b9.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f6c7d0e0a243d4ec15c4.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f767d0e0a243d4ec15e2.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f793d0e0a243d4ec15e6.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f7ccd0e0a243d4ec15f4.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f83cd0e0a243d4ec1608.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f89ad0e0a243d4ec1627.jpg" class="pic" />
<img src="https://pic1.imgdb.cn/item/6770f8c0d0e0a243d4ec1649.jpg" class="pic" / >
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<radialGradient r="0.8" id="rg">
<stop offset="0.1" stop-color="hsl(0, 50%, 10%)"></stop>
<stop offset="0.5" stop-color="hsl(90, 50%, 50%)"></stop>
<stop offset="1" stop-color="hsl(180, 50%, 90%)"></stop>
</radialGradient>
<path d="M 100 50 A 20 13.333333333333334 0 0 0 140 50 A 20 13.333333333333334 0 0 0 100 50 A 20 13.333333333333334 72 0 0 112.36067977499789 88.04226065180615 A 20 13.333333333333334 72 0 0 100 50 A 20 13.333333333333334 144 0 0 67.63932022500211 73.51141009169893 A 20 13.333333333333334 144 0 0 100 50 A 20 13.333333333333334 216 0 0 67.63932022500211 26.48858990830108 A 20 13.333333333333334 216 0 0 100 50 A 20 13.333333333333334 288 0 0 112.36067977499789 11.957739348193854 A 20 13.333333333333334 288 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl"></path>
<g stroke-width="5">
<path id="bgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="#ebeef5" fill="none"></path>
<path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="darkred" fill="none"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="white" style="font:bold 24px;">
<text x="82%" y="50%" id="durTime">00:00</text>
<text x="18%" y="50%" id="curTime">00:00</text>
</g>
</svg>
</div>
<div class="lrcShow" data-lrc="2025一定要幸福" ></div>
</div>
<script>
let pics = oBlk.querySelectorAll('.pic');
pics.forEach((item, idx) => {
item.ontouchstart = item.onmouseover = () => {
pics.forEach(ele => ele.style.animationPlayState = 'paused');
item.style.transform = 'scale(1.5)';
item.style.opacity = 1;
}
item.ontouchend = item.onmouseout = () => {
pics.forEach(ele => ele.style.animationPlayState = 'running');
item.style.transform = 'scale(1)';
item.style.opacity = 0.8;
}
});
// 载入歌词同步代码
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 = () => {
// 同步歌词
let lrctxt = ` 2025一定要幸福-发财姐
作词：张一一
作曲：张一一
2025要幸福
祝你发财和暴富
身体健康家庭幸福
顺风顺水也顺路
遇到贵人来帮助
走对每一步
其他全部都抛开
一定要幸福
2025要幸福
一定发财和暴富
财神路过你家门前
也要问问路
新的一年告别过去
吃的那这苦
从今以后只有快乐
健康幸福
祝你在新的一年
要狠狠幸福
祝你在新的一年
狠狠暴富
快乐的迎接2025
拥抱你的只有快乐和幸福
拥抱你的只有快乐和幸福
2025要幸福
一定发财和暴富
财神路过你家门前
也要问问路
新的一年告别过去
吃的那这苦
从今以后只有快乐
健康幸福
祝你在新的一年
要狠狠幸福
祝你在新的一年
狠狠暴富
快乐的迎接2025
拥抱你的只有快乐和幸福
拥抱你的只有快乐和幸福
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=2639308634.mp3",
}
let player = new lrcPlayerY(opts);
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(player.mObj.duration);
curTime.textContent = formatTime(player.mObj.currentTime);
});
// 动态元素监测
let aniSvg = oBlk.querySelectorAll('svg');
let runState = () => {
player.mObj.paused
? (oBlk.style.setProperty('--rState','paused'), aniSvg.pauseAnimations(), pics.forEach(ele => ele.style.animationPlayState = 'paused'))
: (oBlk.style.setProperty('--rState','running'),aniSvg.unpauseAnimations(),pics.forEach(ele => ele.style.animationPlayState = 'running'));
}
// SVG viewBox 与 实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = player.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
player.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; player.idx = idx;
player.mObj.currentTime = chkTime;
return fIdx;
}
});
};
fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;
// 歌曲、歌词 及 动态元素 启/停控制
mCtrl.onclick = () => {
player.mObj.paused ? (player.mObj.play()) : (player.mObj.pause());
}
player.mObj.addEventListener('play', () => runState());
player.mObj.addEventListener('pause', () => runState());
player.mObj.play().catch(_ = () => runState());
}
</script> 鸣谢难难老师的吊脚楼代码。 这个制作漂亮，祝梦江南老师2025幸福快乐{:4_204:} 欣赏精彩美帖，祝福梦江南新年快乐。 阿姨好喜庆的帖子，难难老师这个代码运用的太好了，小图图的移动流畅，图图可爱，制作太美了 背景图图这个设置也是漂亮，红红的隐隐约约的显示出来设计的有特点的 也是特别喜欢难难老师的特效代码{:4_178:} 阿姨我们都要2025 一定幸福哦{:4_179:} 欣赏老师的佳作，祝老师2025年幸福安康！
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 朵拉 发表于 2024-12-30 13:46
这个制作漂亮，祝梦江南老师2025幸福快乐
问好朵拉老师，谢谢分享，祝您2025年幸福安康！{:4_204:} 梦油 发表于 2024-12-30 13:48
欣赏精彩美帖，祝福梦江南新年快乐。
问好梦油老师，谢谢分享支持，祝您2025年幸福安康！{:4_204:} 小辣椒 发表于 2024-12-30 14:00
阿姨好喜庆的帖子，难难老师这个代码运用的太好了，小图图的移动流畅，图图可爱，制作太美了
问好小辣椒，谢谢支持鼓励。阿姨衷心祝您2025年幸福安康！{:4_204:} 小辣椒 发表于 2024-12-30 14:02
背景图图这个设置也是漂亮，红红的隐隐约约的显示出来设计的有特点的
背景图把原图显示10%了。否则太浓不好看了。 小辣椒 发表于 2024-12-30 14:03
也是特别喜欢难难老师的特效代码
是的，难难老师的这款特效蛮漂亮的，所以借用了。 小辣椒 发表于 2024-12-30 14:04
阿姨我们都要2025 一定幸福哦
2025年我们一定会幸福安康的。{:4_179:} 老谟深虑 发表于 2024-12-30 14:57
欣赏老师的佳作，祝老师2025年幸福安康！
问好老谟老师，谢谢分享支持，祝您2025年幸福安康！{:4_204:} 好萌萌哒哒的小龙龙呵{:4_204:}祝梦江南新年快乐！ 起个网名好难 发表于 2024-12-30 15:45
问好老师，谢谢支持，祝您2025年幸福安康！{:4_204:} 樵歌 发表于 2024-12-30 16:08
好萌萌哒哒的小龙龙呵祝梦江南新年快乐！
问好樵歌老师，谢谢分享支持，祝您2025年幸福安康 ！{:4_204:}