Skip to content

N
Neos
Commit 01b0ade5 authored by timel's avatar timel
Browse files
Options

feat: start

parent 210aa003
Pipeline #23238 passed with stages
            in 39 minutes and 2 seconds
            Hide whitespace changes
            Inline Side-by-side
            Showing with 78 additions and 132 deletions
            src/ui/Start/index.module.scss
            View file @ 01b0ade5
            .wrap { .wrap {
            position: relative; position: relative;
            text-align: center;
            height: calc(100% - var(--header-height)); height: calc(100% - var(--header-height));
            display: flex; display: flex;
            flex-direction: column; flex-direction: column;
            ...@@ -10,124 +9,65 @@ ...@@ -10,124 +9,65 @@
            } }
            .main { .main {
            height: 650px; height: 453px;
            width: 650px; width: 1000px;
            max-height: 100%;
            position: relative; position: relative;
            display: flex; display: flex;
            justify-content: center; justify-content: space-between;
            .neos-pic { .left {
            max-width: 100%;
            max-height: 100%;
            filter: drop-shadow(0 0 50px #ffffff7d) drop-shadow(0 10px 0.5rem #0a3c71ce);
            z-index: -1;
            }
            .neos-logo {
            filter: drop-shadow(0 0 2rem #ffffffbc);
            position: absolute;
            top: 50%;
            width: 90%;
            height: fit-content;
            left: 52%;
            transform: translateX(-50%);
            }
            }
            // 以下是粒子动画的样式
            .particles-container {
            width: 100%;
            height: 100%;
            position: relative;
            }
            .particle-container {
            $particleNum: 200;
            $particleColor: hsl(180, 100%, 80%);
            position: absolute;
            transform: translateY(-10vh);
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            .particle {
            width: 100%;
            height: 100%; height: 100%;
            border-radius: 50%; display: flex;
            mix-blend-mode: screen; flex-direction: column;
            background-image: radial-gradient( gap: 6px;
            hsl(180, 100%, 80%), .neos-logo {
            hsl(180, 100%, 80%) 10%, width: 143px;
            hsla(180, 100%, 80%, 0) 56% height: 34px;
            );
            animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
            }
            @keyframes fadein-frames {
            0% {
            opacity: 1;
            } }
            .title {
            50% { font-size: 36px;
            opacity: 0.7; font-weight: 500;
            color: rgba(255, 255, 255, 0.86);
            } }
            .keywords {
            100% { font-size: 24px;
            opacity: 1; font-weight: 500;
            color: rgba(235, 245, 235, 0.8);
            } }
            } .details {
            margin-top: 31px;
            @keyframes scale-frames { width: 450px;
            0% { font-size: 14px;
            transform: scale3d(0.4, 0.4, 1); font-weight: 500;
            } line-height: 24px;
            color: rgba(235, 245, 235, 0.5);
            50% {
            transform: scale3d(2.2, 2.2, 1);
            }
            100% {
            transform: scale3d(0.4, 0.4, 1);
            } }
            } }
            .right {
            $particleBaseSize: 10; width: 360px;
            height: 100%;
            @for $i from 1 to $particleNum { position: relative;
            &:nth-child(#{$i}) { overflow: hidden;
            $particleSize: random($particleBaseSize); border-bottom-right-radius: 180px;
            width: $particleSize + px; border-bottom-left-radius: 180px;
            height: $particleSize + px; .neos-main-bg {
            position: absolute;
            $startPositionY: random(10) + 80; bottom: 0;
            $framesName: "move-frames" + $i; width: fit-content;
            $moveDuration: 28000 + random(9000) + ms; height: 360px;
            border-radius: 50%;
            animation-name: #{$framesName}; filter: brightness(0.7);
            animation-duration: $moveDuration; }
            animation-delay: random(37000) + ms; .neos-main {
            position: absolute;
            @keyframes #{$framesName} { bottom: 0;
            from { border-bottom-right-radius: 50%;
            transform: translate3d( transform: scale(1.25);
            #{random(90) + vw}, transform-origin: 50% 100%;
            #{$startPositionY + vh}, width: max-content;
            0 filter: drop-shadow(0px 8px 8px rgba(255, 255, 255, 0.3))
            ); drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.8));
            } transition: 0.2s;
            to {
            transform: translate3d(
            #{random(90) + vw},
            #{- $startPositionY - random(30) + vh},
            0
            );
            }
            }
            .particle {
            animation-delay: random(4000) + ms;
            }
            } }
            } }
            } }
            src/ui/Start/index.tsx
            View file @ 01b0ade5
            ...@@ -17,28 +17,31 @@ export const Component: React.FC = () => { ...@@ -17,28 +17,31 @@ export const Component: React.FC = () => {
            <> <>
            <Background /> <Background />
            <div className={styles.wrap}> <div className={styles.wrap}>
            <div className={styles["particles-container"]}> <main className={styles.main}>
            {Array.from({ length: 100 }).map((_, key) => ( <div className={styles.left}>
            <div key={key} className={styles["particle-container"]}> <img
            <div className={styles["particle"]} /> className={styles["neos-logo"]}
            src={`${NeosConfig.assetsPath}/neos-logo.svg`}
            alt="YGO NEOS"
            />
            <div className={styles.title}>游戏王网页对战模拟器</div>
            <div className={styles.keywords}>开源、免费、轻量级</div>
            <div className={styles.details}>
            这是有关Neos的详细介绍。观夫明堂之宏壮也，则突兀瞳曨，乍明乍蒙，若大古元气之结空。巃嵸颓沓，若嵬若嶪，似天阃地门之开阖。尔乃划岝峉以岳立，郁穹崇而鸿纷。冠百王而垂勋，烛万象而腾文。
            </div> </div>
            ))} <LoginBtn logined={Boolean(user)} />
            </div> </div>
            <main className={styles["main"]}> <div className={styles.right}>
            <img <img
            className={styles["neos-logo"]} className={styles["neos-main-bg"]}
            src={`${NeosConfig.assetsPath}/neos-logo.svg`} src={`${NeosConfig.assetsPath}/neos-main-bg.webp`}
            alt="YGO NEOS" />
            /> <img
            <img className={styles["neos-main"]}
            className={styles["neos-pic"]} src={`${NeosConfig.assetsPath}/neos-main.webp`}
            src={`${NeosConfig.assetsPath}/neos.png`} />
            alt="neos" </div>
            />
            </main> </main>
            <div style={{ display: "flex", justifyContent: "center" }}>
            <LoginBtn logined={Boolean(user)} />
            </div>
            </div> </div>
            </> </>
            ); );
            ...@@ -55,7 +58,10 @@ const LoginBtn: React.FC<{ logined: boolean }> = ({ logined }) => { ...@@ -55,7 +58,10 @@ const LoginBtn: React.FC<{ logined: boolean }> = ({ logined }) => {
            const goToMatch = () => navigate("/match"); const goToMatch = () => navigate("/match");
            return ( return (
            <SpecialButton onClick={logined ? goToMatch : loginViaSSO}> <SpecialButton
            style={{ marginTop: "auto" }}
            onClick={logined ? goToMatch : loginViaSSO}
            >
            <span>{logined ? "开始游戏" : "登录游戏"}</span> <span>{logined ? "开始游戏" : "登录游戏"}</span>
            <RightOutlined /> <RightOutlined />
            </SpecialButton> </SpecialButton>
            ......
            Markdown is supported
            0% or
            You are about to add 0 people to the discussion. Proceed with caution.
            Finish editing this message first!
            Please register or to comment