张怡诺 - 你就是我最美的相逢[粒子动画音乐可控]
本帖最后由 亚伦影音工作室 于 2022-10-18 15:53 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 600px;background: teal url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/64465d86c483fe39e1569d50f2141b02.jpg') no-repeat center/cover;display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#btnplay {position: absolute;
width: 90px;
height: 90px;
left: 30px;
bottom: 0px;
border: 2px solid #000000;
background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
mask: radial-gradient(transparent 7px,#red 0);
-webkit-mask: radial-gradient(transparent 7px,red 0);
border-radius: 50%;
cursor: pointer;
animation: rot 4s linear infinite;
z-index: 20;
transform: rotateX(45deg) rotateY(20deg) rotate(0deg);}
#tupian { position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: tu 10s linear infinite;
cursor: pointer;-webkit-mask-image: radial-gradient(black 30% ,transparent 65%);
opacity: 1; }
@keyframes tu { 0% {opacity: 0;
transform: scale(0.2);
}
50% {opacity: 1;
transform: scale(0.8);}
90% {opacity: 1;
transform: scale(0.8);}
100% {opacity: 0;
transform: scale(0.8);
}}
#mpic { position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: fly 100s linear infinite;
cursor: pointer;
opacity: 1; }
#mpicc { position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: tot 80s linear infinite;
cursor: pointer;
opacity: 1; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 480px;color: #000080; font-family: 华文隶书;
font-size: 45px;-webkit-background-clip: text; filter: drop-shadow(#ffffff 2px 0 0)drop-shadow(#ffffff 0 2px 0)drop-shadow(#ffffff -2px 0 0) drop-shadow(#ffffff 0 -2px0); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: repeating-linear-gradient(275deg, #EE0C0C 0%,#E33D0C 100%);-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { 0% {
transform: rotateX(45deg) rotateY(20deg) rotateZ(0deg);
}
100% {
transform: rotateX(45deg) rotateY(20deg) rotateZ(360deg);
}}
@keyframes fly {from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: 100px 1600px;
}
}
@keyframes tot {from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: -1600px 300px;
}
}
#tx { position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: tx 2s linear infinite;
cursor: pointer;
opacity: 1; }
@keyframes tx {
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}
</style>
<div id="papa"><div id="tx">
<imgid="tupian"style="width: 80%; height: 90%;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/17a51793950de9850165769bf779d7f2.jpg)0 0/100% 100%; position: absolute;top: 0px;left: 140px;" ></div>
<img style="width: 100%; height: 100%;background: url(http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png)0 0/30% 40%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url(http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png)0 0/50% 70%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url(http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png)0 0/30% 40%" >
<span id="btnplay" style="animation-play-state: running;"></span>
<span id="lrc" data-lrc="正在播放..." style="--state:running; --motion:cover1; --tt:9.1s;">正在播放...</span>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=241012666&.mp3" autoplay="autoplay"></audio>
<script>
(function() {
let mKey = 0, mFlag = true, slip = 0.5;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.loop = false;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime - slip >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running',
lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
})();
tupian.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tupian.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tupian.style.animationPlayState = 'paused');
mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');
mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');
tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');
</script> 漂亮的制作。我这里网络有限制，听不了歌曲。限制占位献花。欣赏亚伦老师好帖{:4_187:} 欣赏精美音画佳作！
页:
[1]