001code-html--cocos/scratch-gui/static/css/style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1f1f47;
    overflow: hidden;
}

.wrapper{
    position: relative;
    width: 400px;
    height: 450px;
    background:rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper_signup{
    position: relative;
    width: 400px;
    height: 800px;
    background:rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 为下拉菜单 (select 元素) 添加样式 */
select {
    width: 100%;
    height: 45px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    padding: 0 10px;
    font-size: 1em;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4c7.6-7.6%207.6-20%200-27.6-7.6-7.6-20-7.6-27.6%200l-116.4%20116.5L32.9%2041.8c-7.6-7.6-20-7.6-27.6%200-7.6%207.6-7.6%2020%200%2027.6l130.1%20130.2c7.6%207.6%2020%207.6%2027.6%200L287%2069.4z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

h2{
    font-size: 2em;
    color: #fff;
    text-align: center;
}

.input-box{
    position: relative;
    width: 320px;
    margin: 18px 0;
    border-bottom: 2px solid #fff;
}

.input-box-select{
    position: relative;
    width: 320px;
    margin: 15px 0;
    border-bottom: 2px solid transparent; /* 将白色边框改为透明色 */
}

.input-box label{
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    pointer-events: none;
    color: #fff;
}

.input-box input{
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #fff;
    padding: 0 35px 0 5px;
}

.input-box input:focus~label,
.input-box input:valid~label{
    top: 5px;
}

.input-box .icon{
    position: absolute;
    right: 8px;
    color: #fff;
    font-size: 1.2em;
    line-height: 57px;
}

.remeber-forgot{
    margin: -6px 0 15px;
    font-size: 0.9em;
    color: #fff;
    display: flex;
    justify-content: space-between;
}
.remeber-forgot a{
    color: #fff;
    text-decoration: none;
}
.remeber-forgot a:hover{
    text-decoration: underline;
}
.remeber-forgot label input{
    accent-color: #fa709a;
    margin-right: 3px;
}
button{
    width: 100%;
    height: 45px;
    background: #fa709a;
    border: none;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
    transition: transform 0.2s ease, background-color 0.2s ease;
    position: relative;
}

/* 当按钮被按下时的效果 */
button:active {
    transform: scale(0.95); /* 按下时缩小按钮 */
    background: #c65375; /* 改变背景颜色 */
}

/* 按下时添加的额外点击效果 */
button.button-clicked {
    background: #c65375;
    transform: scale(0.95);
    box-shadow: 0 0 15px rgba(250, 112, 154, 0.5);
}

button.loading {
    color: transparent; /* 隐藏按钮文字 */
}

button.loading::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
}

/* 旋转动画 */
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.register-link{
    font-size: 0.9em;
    text-align: center;
    color: #fff;
    margin: 25px 0 0px;
}
.register-link a{
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.register-link  a:hover{
    text-decoration: underline;
}

.blob{
    position: absolute;
    width: 500px;
    height: 500px;
    background: linear-gradient(180deg,rgba(47,184,255,0.42),#5c9df1 100%);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
    transform: translate(-100px,-50px) rotate(-90deg);
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    animation: animateBlob 20s infinite alternate;
}

.blob:hover{
    width: 520px;
    height: 520px;
    filter: blur(30px);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.6),
    inset 100px 100px 0 0 #fa709a,
    inset 200px 200px 0 0 #784ba8, 
    inset 300px 300px 0 0 #2b86c5;
}

@keyframes animateBlob{
    100%{
        transform: translate(300px ,50px) rotate(-10deg);
        border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
    }
}