Coldin04/atlas-study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add login UI with animated Atlas logo demo

Browse source
This commit is contained in:
Coldin04 2026-01-31 11:26:35 +08:00
parent 24d02fffdf
commit 3714269843
1 changed files with 75 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

75
Collider-UI-login/index.html Normal file
View file

@ -0,0 +1,75 @@
<body>
<div class="login-card">
<div class="logo-outer-container">
<div class="block block-blue"></div>
<div class="block block-green"></div>
</div>
<div class="logo-text">Atlas</div>
</div>
<style>
/* 复用之前的样式 */
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f0f2f5; font-family: sans-serif; }
.login-card { background: white; padding: 60px 80px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); text-align: center; animation: cardEntrance 0.8s ease-out forwards; opacity: 0; transform: translateY(30px); }
.logo-text { font-size: 24px; font-weight: bold; color: #333; margin-top: 20px; letter-spacing: 1px; animation: fadeIn 1s ease 0.5s forwards; opacity: 0; }
.block { width: 50px; height: 40px; border-radius: 15px; }
/* --- 核心修改区 --- */
/* 1. 外层容器：现在只负责布局 */
.logo-outer-container {
display: flex;
justify-content: center;
gap: 15px;
/* 动画移到下面的方块上 */
}
/* 2. 内部方块：各自进场，然后一起对撞 */
.block-blue {
background-color: #2E89FF;
/* 动画1: 从左边进来. 动画2: 温和对撞，无限循环 */
animation:
slideInFromLeft 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards,
gentleCollideBlue 2.5s ease-in-out 1s infinite;
}
.block-green {
background-color: #00D1C6;
/* 动画1: 从右边进来. 动画2: 温和对撞，无限循环 */
animation:
slideInFromRight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards,
gentleCollideGreen 2.5s ease-in-out 1s infinite;
}
/* 3. 动画定义 */
/* 进场：从左滑入 (幅度改小) */
@keyframes slideInFromLeft {
from { transform: translateX(-30px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* 进场：从右滑入 (幅度改小) */
@keyframes slideInFromRight {
from { transform: translateX(30px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* 循环：温和对撞 (镜像位移, 留有缝隙) */
@keyframes gentleCollideBlue {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(5px); } /* 蓝块向右 */
40% { transform: translateX(0); }
/* 40% 到 100% 是暂停时间 */
}
@keyframes gentleCollideGreen {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-5px); } /* 绿块向左 */
40% { transform: translateX(0); }
/* 40% 到 100% 是暂停时间 */
}
/* 其他辅助动画 */
@keyframes cardEntrance { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
</style>
</body>