论坛首页 › 特效动画 › 随着春天开一次花

醉美水芙蓉 发表于 2026-2-28 22:35:09

随着春天开一次花

<meta charset="utf-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa {margin:30px 0;width:1280px;height:780px;left:calc(50% - 81px);transform:translateX(-50%);background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/a6e4fd597f622faae8c9f83f44a832ca.jpg') no-repeat center/cover;box-shadow:4px 4px 8px black;overflow:hidden;display:grid;place-items:center;z-index:1;position:relative;--state:running;}
#papa::before, #papa::after {position:absolute;display:var(--display);content:'';top:380px;left:350px;width:140px;height:140px;background:url('https://bbs.cnzv.cc/up/upload/pic/12/20250920-d6994dc217ef0e4fdb52d734abfdd59d.gif') no-repeat center/contain;}
#papa::after {top:310px;left:1000px;width:120px;height:120px;background:url('https://bbs.cnzv.cc/up/upload/pic/12/20250302-ef202b8fd27dcf032201019d42dabd9e.jpg') no-repeat center/contain;transform:rotateY(-180deg);}
#papa > img {position:absolute;display:var(--display);mix-blend-mode:screen;}
#papa > img:nth-of-type(2) {transform:rotateY(-180deg);}
#vid {position:absolute;inset:0;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;opacity:.2;}
#mplayer {position:absolute;display:flex;gap:calc(var(--discSize) + 10px);color:snow;font-size:12px;--discBg:conic-gradient(tan,green,pink,purple);--discSize:36px;--hh:120px;bottom:40px;--width:3px;}
#mplayer::before, #mplayer::after {position:absolute;content:'';}
#mplayer::after {width:var(--discSize);height:var(--discSize);left:calc(50% - var(--discSize) / 2);top:calc(50% - var(--discSize) / 2);background:var(--discBg);border-radius:50%;cursor:pointer;animation:rot 5s infinite linear var(--state);}
#mplayer::before {content:attr(data-tt);height:100%;white-space:pre;left:50%;line-height:calc(var(--hh) / 2);transform:translate(-50%);}
#ppdiv {width:fit-content;height:var(--hh);display:flex;justify-content:center;align-items:center;}
#copydiv {transform:rotateY(-180deg);}
pin-pu {width:2px;height:2px;background:blue;animation:change var(--du) var(--delay) infinite alternate ease-in var(--state);}
#lrc {--motion:cover2;-tt:1s;--bg:linear-gradient(180deg,hsla(290,100%,50%,.75),hsla(310,100%,100%,.85));position:absolute;font-size:clamp(2rem,5vw,3rem);letter-spacing:clamp(8px,2vw,10px);color:DeepPink;white-space:pre-wrap;font-family:"Ma Shan Zheng","SimHei",cursive;user-select:none;user-drag:none;text-shadow:1px 1px 2px rgba(0,0,0,0.1);color:hsl(200, 100%, 50%);white-space:pre;-webkit-background-clip:text;filter:drop-shadow(1px 1px 2px hsla(0,100%,0%,.85));z-index:9;top:50px;left:50%;transform:translateX(-50%);width:80%;text-align:center;}
#lrc::before {position:absolute;content:attr(data-lrc);width:0%;height:100%;color:transparent;overflow:hidden;white-space:pre;background:var(--bg);filter:inherit;-webkit-background-clip:text;animation:var(--motion) var(--tt) linear forwards var(--state);}
#btnFs {--color:white;--bg:#0089f0;position:absolute;color:var(--color);background:var(--bg);opacity:0;border:2px solid var(--color);border-radius:8px;padding:4px;transition:all .75s;cursor:pointer;z-index:1000;top:20px;right:20px;}
@keyframes change {to {height:var(--hh);}}
@keyframes rot {to {transform:rotate(360deg);}}
@keyframes cover1 {from {width:0%;} to {width:100%;}}
@keyframes cover2 {from {width:0%;} to {width:100%;}}
#playTip {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:white;padding:20px 40px;border-radius:10px;cursor:pointer;z-index:9;}
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" alt="" style="width:100%;height:100%;left:0px;top:0px;">
<img src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" alt="" style="width:100%;height:100%;left:0px;top:0px;">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/49353c2696fbdd618542480ef0619a65_preview.mp4" autoplay loop muted></video>
<div id="mplayer" data-tt="0:00&#10;0:00">
<div id="ppdiv"></div>
<div id="copydiv"></div>
</div>
<div id="lrc" data-lrc="HCPlayer">随着春天开一次花</div>
<span id="btnFs">全屏观赏</span>
<div id="playTip"></div>
<audio id="aud" src="https://file.uhsea.com/2602/96ee039104c3f3937e16a0b401752319VG.mp3" autoplay loop></audio>
</div>
<script>
(function(){
const config={
papa:'#papa',
lrcAr: [
,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
               
],
pinpu:{
num:520,
size:2,
gap:0,
color1:'Azure',
color2:'Purple'
}
};
function initPlayer(){
const papa=document.querySelector(config.papa);
const aud=document.getElementById('aud');
const mplayer=document.getElementById('mplayer');
const lrc=document.getElementById('lrc');
const btnFs=document.getElementById('btnFs');
const ppdiv=document.getElementById('ppdiv');
const copydiv=document.getElementById('copydiv');
const playTip=document.getElementById('playTip');
let mKey=0,mFlag=true,ppnum=config.pinpu.num||60,fs=false,timerId;
const mState=()=>{
if(aud.paused){
papa.style.setProperty('--state','paused');
lrc.style.setProperty('--state','paused');
papa.style.setProperty('--display','none');
vid.pause();
}else{
papa.style.setProperty('--state','running');
lrc.style.setProperty('--state','running');
papa.style.setProperty('--display','');
vid.play();
}
};
const showLrc=(time)=>{
if(mKey>=config.lrcAr.length-1)return;
const name=mFlag?'cover1':'cover2';
lrc.innerHTML=config.lrcAr;
lrc.dataset.lrc=config.lrcAr.replace(/<br>/,'\n');
lrc.style.setProperty('--motion',name);
lrc.style.setProperty('--tt',time+'s');
lrc.style.setProperty('--state','running');
mKey+=1;
mFlag=!mFlag;
};
const calcKey=()=>{
for(let j=0;j<config.lrcAr.length;j++){
if(aud.currentTime<=config.lrcAr){
mKey=j-1;
break;
}
}
if(mKey<0)mKey=0;
if(mKey>config.lrcAr.length-1)mKey=config.lrcAr.length-1;
const time=config.lrcAr-(aud.currentTime-config.lrcAr);
showLrc(time);
};
const toMin=(val)=>{
if(!val||isNaN(val))return'0:00';
const min=parseInt(val/60);
let sec=parseFloat(Math.floor(val)%60);
if(sec<10)sec='0'+sec;
return min+':'+sec;
};
const createPinpu=()=>{
const total=Math.ceil(config.pinpu.num/2)||50;
const ppHeight=ppdiv.offsetHeight||120;
Array.from({length:total}).forEach((_,key)=>{
const item=document.createElement('pin-pu');
const color1=config.pinpu.color1||`#${Math.random().toString(16).substr(-6)}`;
const color2=config.pinpu.color2||'snow';
item.style.cssText+=`
width:${config.pinpu.size}px;
background:linear-gradient(to top,${color2},${color1},${color2});
margin-right:${config.pinpu.gap}px;
--hh:${30+Math.random()*(ppHeight-30)}px;
--du:${.3*Math.random()+.3}s;
--delay:-${Math.random()}s;
`;
ppdiv.appendChild(item);
});
const clone=ppdiv.cloneNode(true);
copydiv.appendChild(clone);
};
playTip.onclick=()=>{
aud.play().then(()=>{
playTip.style.display='none';
mState();
}).catch(err=>{
console.log('播放失败：',err);
});
};
mplayer.onclick=()=>{
if(aud.paused){
aud.play();
}else{
aud.pause();
}
};
aud.addEventListener('timeupdate',()=>{
mplayer.dataset.tt=toMin(aud.currentTime)+'\n'+toMin(aud.duration);
for(let j=0;j<config.lrcAr.length;j++){
if(aud.currentTime>=config.lrcAr&&mKey===j){
showLrc(config.lrcAr);
}
}
});
aud.addEventListener('pause',mState);
aud.addEventListener('play',mState);
aud.addEventListener('seeked',calcKey);
btnFs.onclick=()=>{
try{
if(fs){
document.exitFullscreen();
}else{
papa.requestFullscreen();
}
}catch(err){
console.log('全屏操作失败：',err);
}
};
papa.onmousemove=()=>{
clearTimeout(timerId);
btnFs.style.opacity='.95';
timerId=setTimeout(()=>{
btnFs.style.opacity="0";
},3000);
};
document.addEventListener("fullscreenchange",()=>{
if(document.fullscreenElement){
fs=true;
btnFs.innerText='退出全屏';
}else{
fs=false;
btnFs.innerText='全屏观赏';
}
});
setTimeout(mState,50);
setTimeout(createPinpu,100);
}
window.addEventListener('DOMContentLoaded',initPlayer);
})();
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
</script>

klxf 发表于 2026-3-1 22:53:27

构思新颖，效果别致，谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2026-3-2 12:16:54

klxf 发表于 2026-3-1 22:53
构思新颖，效果别致，谢谢醉美管理员精彩分享

谢谢友友支持！

resaszazvv 发表于 5 天前

感谢分享，让我受益匪浅

爱站 发表于 前天 00:54

分享超给力，点赞大拇指

查看完整版本: 随着春天开一次花