From 83ed4c883eb00a202ae18f480c57b1b26d46a6b1 Mon Sep 17 00:00:00 2001 From: camera-2018 <2907618001@qq.com> Date: Thu, 20 Jul 2023 11:54:41 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=B8=85=EF=BC=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Parallax.vue | 110 +++++++++++++++++++++++++++++++--------- public/sparkles.gif | Bin 0 -> 1966867 bytes 2 files changed, 87 insertions(+), 23 deletions(-) create mode 100644 public/sparkles.gif diff --git a/components/Parallax.vue b/components/Parallax.vue index 620ffb0..fe7ce8b 100644 --- a/components/Parallax.vue +++ b/components/Parallax.vue @@ -39,30 +39,40 @@ const containerStyle: CSSProperties = { const layer0 = computed(() => ({ ...layerBase, - transform: `translateX(${parallax.tilt * 10}px) translateY(${ - parallax.roll * 10 - }px) scale(1)`, + transform: `translateX(${parallax.tilt * 10}px) translateY(${parallax.roll * 10 + }px) scale(1)`, })) const layer1 = computed(() => ({ - ...layerBase, - transform: `translateX(${parallax.tilt * 20}px) translateY(${ - parallax.roll * 20 - }px) scale(1.33)`, + userSelect: 'none', + "-webkit-user-drag": "none", + transform: `translateX(${parallax.tilt * 20}px) translateY(${parallax.roll * 20 + }px) scale(1.33)`, + 'background-image': 'linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%)', + 'background-position': '50% 50%', + 'background-size': '160%', + 'background-blend-mode': 'overlay', + filter: 'brightness(1) contrast(1)', + 'mix-blend-mode': 'color-dodge', + opacity: '1', + position: 'absolute', })) const layer2 = computed(() => ({ - ...layerBase, - transform: `translateX(${parallax.tilt * 30}px) translateY(${ - parallax.roll * 30 - }px) scale(1.33)`, + transform: `translateX(${parallax.tilt * 30}px) translateY(${parallax.roll * 30 + }px) scale(1.33)`, + 'background-image': 'linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)', + opacity: '.1', + filter: 'brightness(.5) contrast(1)', + width: '100%', + height: '100%', + position: 'absolute', })) const layer3 = computed(() => ({ ...layerBase, - transform: `translateX(${parallax.tilt * 40}px) translateY(${ - parallax.roll * 40 - }px) scale(1.33)`, + transform: `translateX(${parallax.tilt * 40}px) translateY(${parallax.roll * 40 + }px) scale(1.33)`, })) const layer4 = layerBase @@ -75,10 +85,9 @@ const cardStyle = computed(() => ({ border: '1px solid #000000', overflow: 'hidden', transition: '.3s ease-out all', - boxShadow: '0 0 20px 0 rgba(255, 255, 255, 0.1)', - transform: `rotateX(${parallax.roll * 20}deg) rotateY(${ - parallax.tilt * 20 - }deg)`, + boxShadow: '-20px -20px 30px -25px #ec9bb6, 20px 20px 30px -25px #ccac6f, -7px -7px 10px -5px #ec9bb6, 7px 7px 10px -5px #ccac6f, 0 0 13px 4px rgba(255,255,255,0.3),0 55px 35px -20px rgba(0, 0, 0, 0.5)', + transform: `rotateX(${parallax.roll * 20}deg) rotateY(${parallax.tilt * 20 + }deg)`, })) @@ -93,15 +102,70 @@ export default {
+
PDOKP&@cpD_{hh_LBipIg9+WnVi8L5N jW-itwY!B$%vL
z)mfAO6R4~=W3KGl5M$1zM9h$!&o$Y@^33(t(vMlswEhOqwJbQx;wt*R!Y0U03s5nl)k3)>O%soy}Tm
zWuzQdVW1EdcW|MwU9+~pCyDUlA7K-B?fm&+zc8`-Ty7n4;=+BW{{;QruXgF;AA{aL
z*>+^o>e17z9(|FRH^Xh4HjB1<{zH{euUx4*y_X8w1;F}PgDxlK(nD~m0=;5TLDnMa
zMYg0WVWpA?HEgaW=0w8e3|dO6goO+>j4r{!Z1NDo0N=ANu*CdpZ@d^|l##}aB#ET|
z6rjjsug1cJyfMhKBce#-sS!=#%lxI1l
zUpB_VyyxcezEAr_E4HOuCdKOw9gueH7Nzta);uy-^wOojl48t#1tg?E3jB8-y`{H3
zte_K2G}}CL?
rp;Pi7*aD6PisYl{30oyXn>Y}JeztI3IO%KIdVD1b&;k>H3%DTv
z3kBc+ifwzCHL=X;hxpv!m3eaeOA1ZU)NSq0wRpMYW9y
zJ^{2ixL31+1pT0mr?PL!qLAx!a)z3fyUN}^++QkDrh}-vg5|Ihw9}dLs3D56!+GPDZ
z5qdy7hS2ap9iw#2$n@1nliB)AIs7G$O}O4JE6Mu*{6fktR!YvO(Q8n;EUyUJ0yrQj
zAFfkOpoJtz0z(G82d!fRjnhXNx9$Do?#LXeeb68g06auUe{<6DV71Eeq)jtP7m)~3
zIpmWh<4c^88y*vYUD2EZ;ug3uRZZmLHAh9v8&MvCQl1?g{YyHQ<@x-|a#UR{G9gW~
zRBevkZf=M);Nzz#Ur2_>w%CQ{D?!HPn*Dko@+gH;P=JJTTBK0sEfqMUp)?SXA=MLB
z6lH)+$S*TCV27mOdnV2=ncqe;k5BHO_FuPskdwY`jYjY_kDSBaynu
CB0k)N1tnv|Ip&D|g5$qVWn9-MesJN1Wz;YlqmSsYExbH&ucIUxjc
z*-qID$Q=}^L_i`Wpt0$fmL1zxZ~_XT00^X*|3&SVMAe21#@-CJ*x`i~+&~))1{{Mu
z*9sO|dgMaXv{L@@5Ft(uxZvNo5zAt|9tJL8YV<-cU=k~oQysPp4?ds)8r&PIUL4LL
z^+^I)y^`OB;`$w18V%lf{h`iimz#m1+`ti@h07WIfE7s4tgTsyoey!*O|JkNA^M&N
zUf0AxLX0>bM=%
Lo46yyq-r#pCM)wV^TuC)WWzI&mj$VCV~I3H8U2n<0o5_Wn_Uz1Fq#o