From efd4e28e2a6354cbb02358757e5a787633150d58 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Sun, 27 Oct 2019 15:32:56 +0800 Subject: [PATCH] startAnimation --- index.html | 26 +++++++++++++++++++++++ logo.png | Bin 0 -> 19108 bytes styles.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 logo.png diff --git a/index.html b/index.html index 450c4cd2..ebba45de 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,32 @@ +
+
+ +
+ +

请稍后...

diff --git a/logo.png b/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e1607d65b9531f76e1a06dc8217f124d15f5608c GIT binary patch literal 19108 zcmeI3&u`;I6vw9s5L8;R;)1jntSm?%aQrJjYAeZVX?AHPvQ*t7x+iuz9=Fyewz1t! z+S3Y79N_{t{saC24xG5{Ubz8hIItHkoXXhF59cMBR_elDo~0yy^PTtJ_%rjy&cR>p z-1+dz`n7dJ$d&D_?ymS%vd=3oi|^$0^l$O=YP5APA>{Qm`>g%uy*VPp{>$InPxpHt zIV>DhsT&^f>Sz#&-h{Mnj3UY&@KibAhknqmJpJ*fisHNN%BS_7-itQ*k-v2s^Sh^a z_SoqIX1kReo%Pnp5dj7~rOIf~4-#k8uHv#$2ga z>nhVtLuuMoqh4<|&G!{kH)@)0XojU4wo|J)x~`0mN@rc1wPM$EcDuL7>4ep;9HnXG zXxeZ%tPZVe7$0heZQGh|YNn}*9%^zDq;#YP$@L=0BuFVanDJW=#id+dcJ-<6%_e6q zQl_jNJ0JNg+%lzb%a=kiLoIQw&SuPM8peBJ*zXjpY-fT{+1$)mmGaJ~e&B|~^F;-nO$=m}!OoX2e%WK$;n#F1=Gfi7H48Eb-wkJ&5V2n3BYr{L3Bq{}4Nc3^+i+zvw zOMS9yaYeF*%M435sVc^7s;*vh)eTRW%?34_yyh|eV0tY}!YriP@)NOIPfDv;tmS-X zyURbHZ=DEzKi{Du8YeufzjkF(fYU8)x?^QNc^x~HWqVtPW#z%$mNwTq8`jiw?B*{{ z=fw~d@k{Qja}1AoASiJv%fb`yTt2b?AHV9N)4IeP^zp1b*5v$LT$L|auadM`2ZDh z0U&Y{amo1r6>$L|auadM`2ZDh0U&Y{amo1r6>$L|auadM`2ZDh0U&Y{amo1r6>$L| zauadM`2ZDh0U&Y{amo1r6>$L|auadM`2ZDh0U&Y{amo1r6>$L|auadM`2ZDh0U&Y{ zamo1r6>$L|auadM`2ZDh0U&Y{amo1r6>$L|auadM`2ZDh0U&Y{amo1r6>$L|auadM z`2ZDh0U&ZyifeuL5+@JDo0~)Nil!fb`>S}pQ(;@XJwi_3CgjnVg#2?Re*YlkSSRGq z`-C{(5%Na(&1XN~CgiHV-MzUtS|iHU-=D5Me*E~6@LzdYmi1_*D1;|Zo=Elc{9lj- z|35Sw01`j~YiDO-%a9zGt@HEzaSD(C5_s+eUOcZ(&%2*r*8jN^zyTluB!JHYxCW2_ g5?CYT?Ckq%Z@u)(Yx`eke-E~A-Rb`D!Tm4(1)>~GkpKVy literal 0 HcmV?d00001 diff --git a/styles.css b/styles.css index 40d329e4..9fe80446 100644 --- a/styles.css +++ b/styles.css @@ -422,4 +422,62 @@ p#name { 100% { transform: rotate(45deg) translate(-3px, -3px); } -} \ No newline at end of file +} + +#startImageBackgroundDiv { + display: none; + width: 100%; + height: 100%; + position: fixed; + z-index: 10000; +} + +#startImageDiv { + width: 100%; + height: 100%; + position: fixed; + background: black; + opacity: 1; +} + +#startImageLogo { + opacity: 0; + max-width: 60%; + max-height: 60%; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.startImageAnimation { + -webkit-animation: startImage 4s ease-in-out 1s alternate 1; + animation: startImage 4s ease-in-out 1s alternate 1; +} + +@-webkit-keyframes startImage { + 0% { opacity: 0; } + 60% { opacity: 1; } + 100% { opacity: 0; } +} + +@keyframes startImage { + 0% { opacity: 0; } + 60% { opacity: 1; } + 100% { opacity: 0; } +} + +.startImageDivAnimation { + -webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1; + animation: startImageDivDisappear 2s ease-in-out 5s alternate 1; +} + +@-webkit-keyframes startImageDivDisappear { + 0% { opacity: 1 } + 100% { opacity: 0 } +} + +@keyframes startImageDivDisappear { + 0% { opacity: 1 } + 100% { opacity: 0 } +}