mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-25 00:37:24 +08:00
✨ feat(MusicFull): 添加歌词背景动画
This commit is contained in:
@@ -6,6 +6,7 @@
|
|||||||
:drawer-style="{ backgroundColor: 'transparent' }"
|
:drawer-style="{ backgroundColor: 'transparent' }"
|
||||||
>
|
>
|
||||||
<div id="drawer-target">
|
<div id="drawer-target">
|
||||||
|
<div class="drawer-back" :style="{backgroundImage:`url(${getImgUrl(playMusic?.picUrl, '300y300')})`}"></div>
|
||||||
<div class="music-img">
|
<div class="music-img">
|
||||||
<n-image
|
<n-image
|
||||||
ref="PicImgRef"
|
ref="PicImgRef"
|
||||||
@@ -107,6 +108,26 @@ defineExpose({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
@keyframes round {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.drawer-back{
|
||||||
|
@apply absolute bg-cover bg-center opacity-70;
|
||||||
|
filter: blur(80px) brightness(80%);
|
||||||
|
z-index: -1;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
animation: round 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
#drawer-target {
|
#drawer-target {
|
||||||
@apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
|
@apply top-0 left-0 absolute w-full h-full overflow-hidden rounded px-24 pt-24 pb-48 flex items-center;
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
|
|||||||
Reference in New Issue
Block a user