diff --git a/css/3.css b/css/3.css deleted file mode 100644 index 6d7460f..0000000 --- a/css/3.css +++ /dev/null @@ -1,327 +0,0 @@ -/* -* Variable definitions -*/ -/* -* Animations -*/ -.page-home { - height: 100vh; - width: 100%; - background: #fff; -} -.page-home .blue-sky { - width: 100%; - height: 240px; - background-image: -webkit-linear-gradient(top, #c4e4fd, #fff); - position: relative; -} -.page-home .sun { - width: 150px; - height: 150px; - background: #fffaa9; - border-radius: 100%; - box-shadow: 0 0 60px #ffcfa9, 0 0 100px #b9a018; - position: fixed; - right: 40px; - bottom: -20px; - opacity: 0; - -webkit-animation: up 8s ease-in-out; - animation: up 8s ease-in-out; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} -.page-home .sun .left-eye, -.page-home .sun .left-eye::after { - position: relative; - border-top-right-radius: 90px; - border-top-left-radius: 90px; - background: #ffcfa9; - width: 25px; - height: 12.5px; - -webkit-transform: scale(1.5); - transform: scale(1.5); - top: 60px; - left: 30px; - -webkit-animation: sun-lefteye 2.3s ease-in-out infinite; - animation: sun-lefteye 2.3s ease-in-out infinite; -} -.page-home .sun .left-eye::after { - content: ""; - position: absolute; - background: #fffaa9; - left: 0px; - top: 3px; - -webkit-transform: scale(0.9); - transform: scale(0.9); - -webkit-animation: sun-eye-smol 2.3s ease-in-out infinite; - animation: sun-eye-smol 2.3s ease-in-out infinite; -} -.page-home .sun .right-eye, -.page-home .sun .right-eye::after { - position: absolute; - border-top-right-radius: 90px; - border-top-left-radius: 90px; - background: #ffcfa9; - width: 25px; - height: 12.5px; - -webkit-transform: scale(1.5); - transform: scale(1.5); - top: 60px; - left: 90px; - -webkit-animation: sun-righteye 2.3s ease-in-out infinite; - animation: sun-righteye 2.3s ease-in-out infinite; -} -.page-home .sun .right-eye::after { - content: ""; - position: absolute; - background: #fffaa9; - left: 0px; - top: 3px; - -webkit-transform: scale(0.9); - transform: scale(0.9); - -webkit-animation: sun-eye-smol 2.3s ease-in-out infinite; - animation: sun-eye-smol 2.3s ease-in-out infinite; -} -.page-home .left-eyelash, -.page-home .left-eyelash::after, -.page-home .right-eyelash::after, -.page-home .right-eyelash { - position: relative; - width: 2.5px; - height: 8px; - background: #ffcfa9; - border-radius: 200px; -} -.page-home .left-eyelash, -.page-home .left-eyelash::after, -.page-home .right-eyelash::after { - top: 2px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.page-home .left-eyelash::after, -.page-home .right-eyelash::after { - content: ""; - position: absolute; - top: -1px; - left: 3px; - -webkit-transform: rotate(5deg); - transform: rotate(5deg); -} -.page-home .right-eyelash { - top: -1px; - left: 21px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} -.page-home .right-eyelash::after { - content: ""; - position: absolute; - top: 1px; - left: 3px; -} -.page-home .rays { - position: absolute; - -webkit-transform-origin: center; - transform-origin: center; - margin: auto; - width: 150px; - z-index: -1; - top: 0; - left: 0; - right: 0; - bottom: 0; - -webkit-animation: spin 120s linear infinite; - animation: spin 120s linear infinite; -} -.page-home .rays .beam { - background: linear-gradient(0deg, rgba(255,255,255,0), #ffcfa9 60%, #ffcfa9); - margin-left: 10px; - border-radius: 50% 50% 0 0; - position: absolute; - opacity: 0.05; - height: 110px; - -webkit-animation: color 8s ease-in-out; - animation: color 8s ease-in-out; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} -.page-home .rays .beam:nth-child(1) { - width: 40px; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - top: -90px; - left: 42px; -} -.page-home .rays .beam:nth-child(2) { - width: 30px; - -webkit-transform: rotate(210deg); - transform: rotate(210deg); - right: -5px; - top: -80px; -} -.page-home .rays .beam:nth-child(3) { - width: 50px; - -webkit-transform: rotate(255deg); - transform: rotate(255deg); - top: -20px; - right: -65px; -} -.page-home .rays .beam:nth-child(4) { - width: 24px; - -webkit-transform: rotate(300deg); - transform: rotate(300deg); - top: 60px; - left: 150px; -} -.page-home .rays .beam:nth-child(5) { - width: 40px; - top: 135px; - left: 40px; -} -.page-home .rays .beam:nth-child(6) { - width: 30px; - -webkit-transform: rotate(-35deg); - transform: rotate(-35deg); - top: 115px; - right: -12px; -} -.page-home .rays .beam:nth-child(7) { - width: 45px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - top: 100px; - left: -45px; -} -.page-home .rays .beam:nth-child(8) { - width: 20px; - -webkit-transform: rotate(75deg); - transform: rotate(75deg); - top: 40px; - left: -70px; -} -.page-home .rays .beam:nth-child(9) { - width: 50px; - -webkit-transform: rotate(-250deg); - transform: rotate(-250deg); - top: -30px; - left: -70px; -} -.page-home .rays .beam:nth-child(10) { - width: 20px; - -webkit-transform: rotate(145deg); - transform: rotate(145deg); - top: -80px; - left: -15px; -} -@-webkit-keyframes up { - 0% { - opacity: 0.6; - bottom: -10%; - } - 25% { - bottom: 10%; - opacity: 1; - } - 50% { - bottom: 35%; - opacity: 1; - } - 75% { - bottom: 55%; - opacity: 1; - } - 100% { - bottom: 75%; - opacity: 1; - } -} -@keyframes up { - 0% { - opacity: 0.6; - bottom: -10%; - } - 25% { - bottom: 10%; - opacity: 1; - } - 50% { - bottom: 35%; - opacity: 1; - } - 75% { - bottom: 55%; - opacity: 1; - } - 100% { - bottom: 75%; - opacity: 1; - } -} -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-webkit-keyframes sun-lefteye { - 50% { - left: 40px; - } -} -@keyframes sun-lefteye { - 50% { - left: 40px; - } -} -@-webkit-keyframes sun-eye-smol { - 50% { - left: 0px; - } -} -@keyframes sun-eye-smol { - 50% { - left: 0px; - } -} -@-webkit-keyframes sun-righteye { - 50% { - left: 100px; - } -} -@keyframes sun-righteye { - 50% { - left: 100px; - } -} -@-webkit-keyframes color { - 0% { - opacity: 0.1; - } - 100% { - opacity: 0.1; - } -} -@keyframes color { - 0% { - opacity: 0.1; - } - 100% { - opacity: 0.1; - } -} - diff --git a/css/4.css b/css/4.css deleted file mode 100644 index 993d18c..0000000 --- a/css/4.css +++ /dev/null @@ -1,511 +0,0 @@ -/* -* Variable definitions -*/ -/* -* Animations -*/ -.page-moon { - height: 100vh; - width: 100%; - background-color: #20263b; -} -#canvas { - width: 100%; - height: 100%; - opacity: 0.5; - position: absolute; - top: 0; - left: 0; -} -.moon { - background-color: #ccc; - border-radius: 50%; - border: 2em solid #333c5d; - height: 15em; - left: 5%; - margin-top: -11em; - position: absolute; - top: 200px; - width: 15em; -} -.moon .moon__container { - -webkit-animation: lookaround 15s infinite alternate; - animation: lookaround 15s infinite alternate; - height: 100%; -} -.moon .moon__crater { - animation: lookaround 15s infinite alternate-reverse; - background-color: #c2c2c2; - border-radius: 50%; - box-shadow: inset -0.3em 0.2em 0 rgba(0,0,0,0.1); - position: absolute; -} -.moon .moon__crater--small { - height: 1.2em; - width: 1.2em; -} -.moon .moon__crater--medium { - height: 2.2em; - width: 2.2em; -} -.moon .moon__crater--big { - height: 3.15em; - width: 3.15em; -} -.moon .moon__crater--1 { - top: 9%; - left: 35%; -} -.moon .moon__crater--2 { - top: 25%; - left: 40%; -} -.moon .moon__crater--3 { - top: 69%; - left: 15%; -} -.moon .moon__crater--4 { - top: 83%; - left: 41%; -} -.moon .moon__crater--5 { - top: 76%; - left: 55%; -} -.moon .moon__crater--6 { - top: 16%; - left: 48%; -} -.moon .moon__crater--7 { - top: 39%; - left: 15%; -} -.moon .moon__face { - height: 15%; - left: 65%; - position: absolute; - top: 54%; - width: 25%; -} -.moon .moon__eye { - -webkit-animation: blink 2s infinite alternate; - animation: blink 2s infinite alternate; - background-color: #000; - border-radius: 50%; - height: 0.75em; - overflow: hidden; - position: absolute; - top: 0; - width: 0.75em; -} -.moon .moon__eye::before, -.moon .moon__eye::after { - -webkit-animation: shine 1s infinite alternate; - animation: shine 1s infinite alternate; - background-color: #fafafa; - border-radius: 50%; - content: ""; - display: block; - height: 40%; - opacity: 0.95; - position: absolute; - width: 40%; -} -.moon .moon__eye::after { - bottom: 0; - height: 60%; - right: 0; - width: 60%; -} -.moon .moon__eye--left { - left: 0; -} -.moon .moon__eye--right { - right: 0; -} -.moon .moon__cheek { - background: #ef9a9a; - border-radius: 40%; - height: 0.75em; - position: absolute; - top: 38%; - width: 1.5em; -} -.moon .moon__cheek--left { - left: -1em; -} -.moon .moon__cheek--right { - right: -1em; -} -.moon .moon__smile { - border: 0.25em solid transparent; - border-left-color: #000; - border-bottom-color: #000; - border-radius: 50%; - height: 1em; - left: 41%; - position: absolute; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - transition: -webkit-transform 0.2s; - transition: transform 0.2s; - transition: transform 0.2s, -webkit-transform 0.2s; - transition: transform 0.2s; - width: 1em; -} -.moon .love { - position: absolute; - right: 1em; - top: 3em; -} -.moon .love__heart { - -webkit-animation: heartbeat 4s infinite normal backwards; - animation: heartbeat 4s infinite normal backwards; - height: 1em; - position: absolute; - width: 1em; -} -.moon .love__heart--1 { - -webkit-animation-delay: 0.5s; - animation-delay: 0.5s; - left: 1.5em; -} -.moon .love__heart--2 { - -webkit-animation-delay: 1s; - animation-delay: 1s; - left: 3em; -} -.moon .love__heart--3 { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; - left: 0em; -} -.moon .love__heart::before, -.moon .love__heart::after { - background: #ef9a9a; - border-radius: 50% 50% 0 0; - content: ""; - display: block; - height: 100%; - position: absolute; - top: 0; - width: 65%; -} -.moon .love__heart::before { - -webkit-transform: rotate(-35deg) translateX(-40%); - transform: rotate(-35deg) translateX(-40%); -} -.moon .love__heart::after { - -webkit-transform: rotate(55deg) translateX(40%); - transform: rotate(55deg) translateX(40%); -} -.container { - position: absolute; - bottom: 0px; - left: 60%; - -webkit-transform: translate(-15%, -50%); - transform: translate(-15%, -50%); - z-index: 1; -} -.container .developer { - position: relative; - top: 320px; -} -.container .fab { - position: absolute; - top: -8px; - left: 50%; - opacity: 0.6; - z-index: 1; -} -.container .desk { - position: relative; - height: 140px; - width: 400px; - background-color: #6a4227; - top: 50px; -} -.container .deskcounter { - position: absolute; - height: 12px; - width: 460px; - background-color: #f0f0f0; - top: 40px; - left: -30px; -} -.container .worker { - position: relative; - top: -288px; - left: -20px; -} -.container .book1 { - position: absolute; - height: 12px; - width: 80px; - background-color: #ffc313; - top: 30px; - left: 308px; - border-radius: 12%; -} -.container .book1-ring { - position: absolute; - width: 7px; - height: 7px; - background: #808080; - border-radius: 50%; - top: 34px; - left: 316px; - z-index: 1; - opacity: 0.6; -} -.container .book1-line1 { - position: absolute; - height: 1.4px; - width: 50px; - background-color: #808080; - top: 38px; - left: 332px; - opacity: 0.6; -} -.container .book1-line2 { - position: absolute; - height: 1.4px; - width: 50px; - background-color: #808080; - top: 35px; - left: 332px; - opacity: 0.6; -} -.container .book2 { - position: absolute; - height: 12px; - width: 80px; - background-color: #f092de; - top: 20px; - left: 308px; - border-radius: 12%; -} -.container .book2-ring { - position: absolute; - width: 7px; - height: 7px; - background: #808080; - border-radius: 50%; - top: 24px; - left: 316px; - z-index: 1; - opacity: 0.6; -} -.container .book2-line1 { - position: absolute; - height: 1.4px; - width: 50px; - background-color: #808080; - top: 25px; - left: 332px; - opacity: 0.6; -} -.container .book2-line2 { - position: absolute; - height: 1.4px; - width: 50px; - background-color: #808080; - top: 28px; - left: 332px; - opacity: 0.6; -} -.container .book3 { - position: absolute; - height: 12px; - width: 80px; - background-color: #e2d7d7; - top: 10px; - left: 308px; - border-radius: 12%; -} -.container .book3-ring { - position: absolute; - width: 7px; - height: 7px; - background: #808080; - border-radius: 50%; - top: 13px; - left: 316px; - z-index: 1; - opacity: 0.6; -} -.container .book3-line1 { - position: absolute; - height: 1.4px; - width: 50px; - background-color: #808080; - top: 13px; - left: 332px; - opacity: 0.6; -} -.container .book3-line2 { - position: absolute; - height: 1.4px; - width: 50px; - background-color: #808080; - top: 17px; - left: 332px; - opacity: 0.6; -} -@-webkit-keyframes shine { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - -webkit-transform: scale(0.6); - transform: scale(0.6); - } -} -@keyframes shine { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - -webkit-transform: scale(0.6); - transform: scale(0.6); - } -} -@-webkit-keyframes glow { - 0% { - box-shadow: 0 0 1em #fff, 0 0 -1em #fff; - opacity: 1; - -webkit-transform: scale(0); - transform: scale(0); - } - 100% { - box-shadow: 0 0 1em #fff; - opacity: 0; - -webkit-transform: scale(2.5); - transform: scale(2.5); - } -} -@keyframes glow { - 0% { - box-shadow: 0 0 1em #fff, 0 0 -1em #fff; - opacity: 1; - -webkit-transform: scale(0); - transform: scale(0); - } - 100% { - box-shadow: 0 0 1em #fff; - opacity: 0; - -webkit-transform: scale(2.5); - transform: scale(2.5); - } -} -@-webkit-keyframes blink { - 0%, 95% { - -webkit-transform: scaleY(1); - transform: scaleY(1); - } - 98%, 100% { - -webkit-transform: scaleY(0.1); - transform: scaleY(0.1); - } -} -@keyframes blink { - 0%, 95% { - -webkit-transform: scaleY(1); - transform: scaleY(1); - } - 98%, 100% { - -webkit-transform: scaleY(0.1); - transform: scaleY(0.1); - } -} -@-webkit-keyframes lookaround { - 0%, 15% { - -webkit-transform: rotate(-10deg); - transform: rotate(-10deg); - } - 20%, 50%, 80% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - 85%, 100% { - -webkit-transform: rotate(10deg); - transform: rotate(10deg); - } -} -@keyframes lookaround { - 0%, 15% { - -webkit-transform: rotate(-10deg); - transform: rotate(-10deg); - } - 20%, 50%, 80% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - 85%, 100% { - -webkit-transform: rotate(10deg); - transform: rotate(10deg); - } -} -@-webkit-keyframes heartbeat { - 0% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); - } - 2% { - opacity: 0.5; - -webkit-transform: scale(1.3); - transform: scale(1.3); - } - 4% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 8% { - -webkit-transform: scale(1.1); - transform: scale(1.1); - } - 10% { - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(1) translate(0, -800%); - transform: scale(1) translate(0, -800%); - } -} -@keyframes heartbeat { - 0% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); - } - 2% { - opacity: 0.5; - -webkit-transform: scale(1.3); - transform: scale(1.3); - } - 4% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 8% { - -webkit-transform: scale(1.1); - transform: scale(1.1); - } - 10% { - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - opacity: 0; - -webkit-transform: scale(1) translate(0, -800%); - transform: scale(1) translate(0, -800%); - } -} - diff --git a/css/index.css b/css/index.css deleted file mode 100644 index 0e25f91..0000000 --- a/css/index.css +++ /dev/null @@ -1,172 +0,0 @@ -.FBH, -.FBV { - display: flex; -} -.FBV { - flex-direction: column; -} -.FBAS { - align-items: flex-start; -} -.FBAC { - align-items: center; -} -.FBAE { - align-items: flex-end; -} -.FBAST { - align-items: stretch; -} -.FBAB { - align-items: baseline; -} -.FBJS { - justify-content: flex-start; -} -.FBJC { - justify-content: center; -} -.FBJE { - justify-content: flex-end; -} -.FBJ { - justify-content: space-between; -} -.FBJB { - justify-content: space-between; -} -.FBJA { - justify-content: space-around; -} -.FBAS-M { - align-content: flex-start; -} -.FBAC-M { - align-content: center; -} -.FBAE-M { - align-content: flex-end; -} -.FBAST-M { - align-content: stretch; -} -.FBAB { - align-content: space-between; -} -.FBAA { - align-content: space-around; -} -.FBAS-S { - align-self: flex-start; -} -.FBAC-S { - align-self: center; -} -.FBAE-S { - align-self: flex-end; -} -.FBAB-S { - align-self: baseline; -} -.FBAST-S { - align-self: stretch; -} -.FB1 { - flex: 1; -} -.FB2 { - flex: 2; -} -.FB3 { - flex: 3; -} -.FB4 { - flex: 4; -} -.FB5 { - flex: 5; -} -.FB6 { - flex: 6; -} -.FB7 { - flex: 7; -} -.FB8 { - flex: 8; -} -.FB9 { - flex: 9; -} -.FB10 { - flex: 10; -} - -.animated-router-in-transition { -/* 页面动画中 */ - position: relative; - width: 100%; - overflow: hidden; -} -.animated-router-forward-enter { - -webkit-transform: translate(100%); - transform: translate(100%); -} -.animated-router-forward-enter-active { - -webkit-transform: translate(0); - transform: translate(0); -} -.animated-router-forward-exit { - -webkit-transform: translate(0); - transform: translate(0); -} -.animated-router-forward-exit-active { - -webkit-transform: translate(-100%); - transform: translate(-100%); -} -.animated-router-backward-enter { - -webkit-transform: translate(-100%); - transform: translate(-100%); -} -.animated-router-backward-enter-active { - -webkit-transform: translate(0); - transform: translate(0); -} -.animated-router-backward-exit { - -webkit-transform: translate(0); - transform: translate(0); -} -.animated-router-backward-exit-active { - -webkit-transform: translate(100%); - transform: translate(100%); -} -.animated-router-forward-enter-active, -.animated-router-forward-exit-active, -.animated-router-backward-enter-active, -.animated-router-backward-exit-active { -/* 不同过渡阶段需要的过渡时间与缓动效果 */ - transition: -webkit-transform 1s linear; - transition: transform 1s linear; - transition: transform 1s linear, -webkit-transform 1s linear; -} -.animated-router-forward-exit, -.animated-router-backward-exit { - position: absolute !important; - width: 100%; - top: 0; - left: 0; -} - -html, -body { - height: 100%; - font-size: 100%; - margin: 0; - overflow: hidden; - width: 100%; -} -#root { - width: 100%; - height: 100%; -} - diff --git a/index.html b/index.html deleted file mode 100644 index d512ed6..0000000 --- a/index.html +++ /dev/null @@ -1 +0,0 @@ -