diff --git a/src/style.scss b/src/style.scss index 240469d707bcb6b14a69cd8375f52cef434071f4..009bb2ebd512c2a6c86fa8459cac620da86f00cc 100644 --- a/src/style.scss +++ b/src/style.scss @@ -334,21 +334,35 @@ button:focus-visible { .shuamozhihua { position: relative; - + height: 100vh; + width: 100vw; img { + --d: 18px; /* 深度 */ + padding-block: var(--d); + outline: var(--d) solid #0008; + outline-offset: calc(-1 * var(--d)); position: absolute; + // left: 50%; + // top: 22vh; + bottom: -100px; width: 100px; height: auto; - left: 50%; - top: 22vh; + animation-duration: 3s; + animation-fill-mode: forwards; + animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .shuamozhihua-title { position: absolute; width: auto; height: auto; - left: calc(50% - 160px); - top: 14vh; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + animation: fadeIn 1s 3s forwards; + // left: calc(50% - 160px); + // top: 14vh; font-family: 'Sanjixinkai', 'Pacifico', 'cursive'; font-size: 32px; background-color: rgba(255, 182, 193, 0.6); @@ -362,12 +376,93 @@ button:focus-visible { .shuamozhihua-img1 { left: calc(50% - 120px); - transform: rotate(-15deg); + transform: rotate(-15deg); + animation-name: moveUpLeft; } .shuamozhihua-img2 { - left: calc(50% + 20px); + right: calc(50% - 80px); transform: rotate(15deg); + animation-name: moveUpRight; } } -} \ No newline at end of file +} + + + + @keyframes moveUpLeftWrapper { + 0% { + bottom: -100px; + left: 0; + transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, -200px); + } + 25% { + bottom: 25%; + left: 75%; + transform: rotate3d(0, 0, 1, 90deg) translate3d(0, 0, -100px); + } + 50% { + bottom: 50%; + left: 25%; + transform: rotate3d(0, 0, 1, 180deg) translate3d(0, 0, -50px); + } + 75% { + bottom: 75%; + left: 75%; + transform: rotate3d(0, 0, 1, 270deg) translate3d(0, 0, -25px); + } + 95% { + bottom: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg); + } + 100%{ + bottom: 50%; + left: calc(50% - 120px); + transform: rotate(-15deg); + } + } + + + + @keyframes moveUpRight { + 0% { + bottom: -100px; + right: 0; + transform: rotate3d(1, 1, 1, 720deg) translate3d(0, 0, -200px); + } + 25% { + bottom: 25%; + right: 75%; + transform: rotate3d(1, 1, 1, 360deg) translate3d(0, 0, -100px); + } + 50% { + bottom: 50%; + right: 25%; + transform: rotate3d(1, 1, 1, 180deg) translate3d(0, 0, -50px); + } + 75% { + bottom: 75%; + right: 75%; + transform: rotate3d(1, 1, 1, 90deg) translate3d(0, 0, -25px); + } + 95% { + bottom: 50%; + right: 50%; + transform: translate3d(50%, -50%, 0) rotate3d(1, 1, 1, 0deg); + } + 100%{ + bottom: 50%; + right: calc(50% - 80px); + transform: rotate(15deg); + } + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } \ No newline at end of file