TIANHE
@@ -225,37 +225,31 @@ All UI elements, error messages, and documentation are fully translated. Languag
|
||||
|
||||
The fastest way to get QuantDinger running.
|
||||
|
||||
#### 1. Prepare Configuration
|
||||
|
||||
Linux/macOS:
|
||||
#### 1. Start Services
|
||||
|
||||
**Linux / macOS**
|
||||
```bash
|
||||
cp docker.env.example backend_api_python/.env
|
||||
nano backend_api_python/.env
|
||||
```
|
||||
|
||||
Windows PowerShell:
|
||||
|
||||
```powershell
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
notepad backend_api_python/.env
|
||||
```
|
||||
|
||||
**Required settings:**
|
||||
- `SECRET_KEY` - Application secret, use a random string
|
||||
- `ADMIN_USER` / `ADMIN_PASSWORD` - Login credentials
|
||||
- `OPENROUTER_API_KEY` - OpenRouter API key (required for AI analysis)
|
||||
|
||||
#### 2. Build and Start
|
||||
|
||||
```bash
|
||||
# Build images and start (first run)
|
||||
git clone https://github.com/brokermr810/QuantDinger.git && \
|
||||
cd QuantDinger && \
|
||||
cp docker.env.example backend_api_python/.env && \
|
||||
docker-compose up -d --build
|
||||
|
||||
# Subsequent starts (no rebuild needed)
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
**Windows (PowerShell)**
|
||||
```powershell
|
||||
git clone https://github.com/brokermr810/QuantDinger.git
|
||||
cd QuantDinger
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
#### 2. Configuration & Access
|
||||
|
||||
- **Frontend UI**: http://localhost
|
||||
- **Default Account**: `quantdinger` / `123456`
|
||||
|
||||
> **Note**: For production or AI features, edit `backend_api_python/.env` (add `OPENROUTER_API_KEY`, change passwords) and restart with `docker-compose restart backend`.
|
||||
|
||||
#### 3. Access the Application
|
||||
|
||||
- **Frontend UI**: http://localhost
|
||||
|
||||
+20
-26
@@ -225,37 +225,31 @@ QuantDinger 为全球用户构建，提供全面的国际化支持：
|
||||
|
||||
运行 QuantDinger 最快的方式。
|
||||
|
||||
#### 1. 准备配置
|
||||
|
||||
Linux/macOS:
|
||||
#### 1. 一键启动
|
||||
|
||||
**Linux / macOS**
|
||||
```bash
|
||||
cp docker.env.example backend_api_python/.env
|
||||
nano backend_api_python/.env
|
||||
```
|
||||
|
||||
Windows PowerShell:
|
||||
|
||||
```powershell
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
notepad backend_api_python/.env
|
||||
```
|
||||
|
||||
**必需设置：**
|
||||
- `SECRET_KEY` - 应用密钥，使用随机字符串
|
||||
- `ADMIN_USER` / `ADMIN_PASSWORD` - 登录凭据
|
||||
- `OPENROUTER_API_KEY` - OpenRouter API 密钥 (AI 分析必需)
|
||||
|
||||
#### 2. 构建并启动
|
||||
|
||||
```bash
|
||||
# 构建镜像并启动 (首次运行)
|
||||
git clone https://github.com/brokermr810/QuantDinger.git && \
|
||||
cd QuantDinger && \
|
||||
cp docker.env.example backend_api_python/.env && \
|
||||
docker-compose up -d --build
|
||||
|
||||
# 后续启动 (无需重新构建)
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
**Windows (PowerShell)**
|
||||
```powershell
|
||||
git clone https://github.com/brokermr810/QuantDinger.git
|
||||
cd QuantDinger
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
#### 2. 访问与配置
|
||||
|
||||
- **前端 UI**: http://localhost
|
||||
- **默认账号**: `quantdinger` / `123456`
|
||||
|
||||
> **注意**：为了使用 AI 功能或生产环境安全，请编辑 `backend_api_python/.env`（添加 `OPENROUTER_API_KEY`，修改密码），然后执行 `docker-compose restart backend` 重启服务。
|
||||
|
||||
#### 3. 访问应用
|
||||
|
||||
- **前端 UI**: http://localhost
|
||||
|
||||
+20
-26
@@ -211,37 +211,31 @@ QuantDingerは、包括的な国際化対応により、世界中のユーザー
|
||||
|
||||
QuantDingerを実行する最速の方法です。
|
||||
|
||||
#### 1. 設定の準備
|
||||
|
||||
Linux/macOS:
|
||||
#### 1. ワンクリック起動
|
||||
|
||||
**Linux / macOS**
|
||||
```bash
|
||||
cp docker.env.example backend_api_python/.env
|
||||
nano backend_api_python/.env
|
||||
```
|
||||
|
||||
Windows PowerShell:
|
||||
|
||||
```powershell
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
notepad backend_api_python/.env
|
||||
```
|
||||
|
||||
**必須設定:**
|
||||
- `SECRET_KEY` - アプリケーションシークレット（ランダムな文字列を使用）
|
||||
- `ADMIN_USER` / `ADMIN_PASSWORD` - ログイン認証情報
|
||||
- `OPENROUTER_API_KEY` - OpenRouter APIキー（AI分析に必要）
|
||||
|
||||
#### 2. ビルドと起動
|
||||
|
||||
```bash
|
||||
# イメージのビルドと起動（初回）
|
||||
git clone https://github.com/brokermr810/QuantDinger.git && \
|
||||
cd QuantDinger && \
|
||||
cp docker.env.example backend_api_python/.env && \
|
||||
docker-compose up -d --build
|
||||
|
||||
# 2回目以降の起動（再ビルド不要）
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
**Windows (PowerShell)**
|
||||
```powershell
|
||||
git clone https://github.com/brokermr810/QuantDinger.git
|
||||
cd QuantDinger
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
#### 2. アクセスと設定
|
||||
|
||||
- **フロントエンド UI**: http://localhost
|
||||
- **デフォルトアカウント**: `quantdinger` / `123456`
|
||||
|
||||
> **注意**: AI機能や本番環境のセキュリティのために、`backend_api_python/.env` を編集し（`OPENROUTER_API_KEY`の追加、パスワードの変更）、`docker-compose restart backend` でサービスを再起動してください。
|
||||
|
||||
#### 3. アプリケーションへのアクセス
|
||||
|
||||
- **フロントエンド UI**: http://localhost
|
||||
|
||||
+20
-26
@@ -224,37 +224,31 @@ QuantDinger는 포괄적인 국제화를 통해 글로벌 사용자를 위해
|
||||
|
||||
QuantDinger를 실행하는 가장 빠른 방법입니다.
|
||||
|
||||
#### 1. 구성 준비
|
||||
|
||||
Linux/macOS:
|
||||
#### 1. 원클릭 시작
|
||||
|
||||
**Linux / macOS**
|
||||
```bash
|
||||
cp docker.env.example backend_api_python/.env
|
||||
nano backend_api_python/.env
|
||||
```
|
||||
|
||||
Windows PowerShell:
|
||||
|
||||
```powershell
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
notepad backend_api_python/.env
|
||||
```
|
||||
|
||||
**필수 설정:**
|
||||
- `SECRET_KEY` - 애플리케이션 비밀 키, 임의의 문자열 사용
|
||||
- `ADMIN_USER` / `ADMIN_PASSWORD` - 로그인 자격 증명
|
||||
- `OPENROUTER_API_KEY` - OpenRouter API 키 (AI 분석에 필요)
|
||||
|
||||
#### 2. 빌드 및 시작
|
||||
|
||||
```bash
|
||||
# 이미지 빌드 및 시작 (처음 실행 시)
|
||||
git clone https://github.com/brokermr810/QuantDinger.git && \
|
||||
cd QuantDinger && \
|
||||
cp docker.env.example backend_api_python/.env && \
|
||||
docker-compose up -d --build
|
||||
|
||||
# 후속 시작 (재빌드 필요 없음)
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
**Windows (PowerShell)**
|
||||
```powershell
|
||||
git clone https://github.com/brokermr810/QuantDinger.git
|
||||
cd QuantDinger
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
#### 2. 접속 및 구성
|
||||
|
||||
- **프론트엔드 UI**: http://localhost
|
||||
- **기본 계정**: `quantdinger` / `123456`
|
||||
|
||||
> **참고**: AI 기능이나 프로덕션 환경의 보안을 위해, `backend_api_python/.env`를 편집하여( `OPENROUTER_API_KEY` 추가, 비밀번호 변경) `docker-compose restart backend`로 서비스를 재시작하십시오.
|
||||
|
||||
#### 3. 애플리케이션 액세스
|
||||
|
||||
- **프론트엔드 UI**: http://localhost
|
||||
|
||||
+20
-26
@@ -225,37 +225,31 @@ QuantDinger 為全球用戶構建，提供全面的國際化支持：
|
||||
|
||||
運行 QuantDinger 最快的方式。
|
||||
|
||||
#### 1. 準備配置
|
||||
|
||||
Linux/macOS:
|
||||
#### 1. 一鍵啟動
|
||||
|
||||
**Linux / macOS**
|
||||
```bash
|
||||
cp docker.env.example backend_api_python/.env
|
||||
nano backend_api_python/.env
|
||||
```
|
||||
|
||||
Windows PowerShell:
|
||||
|
||||
```powershell
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
notepad backend_api_python/.env
|
||||
```
|
||||
|
||||
**必需設置：**
|
||||
- `SECRET_KEY` - 應用密鑰，使用隨機字符串
|
||||
- `ADMIN_USER` / `ADMIN_PASSWORD` - 登錄憑據
|
||||
- `OPENROUTER_API_KEY` - OpenRouter API 密鑰 (AI 分析必需)
|
||||
|
||||
#### 2. 構建並啟動
|
||||
|
||||
```bash
|
||||
# 構建鏡像並啟動 (首次運行)
|
||||
git clone https://github.com/brokermr810/QuantDinger.git && \
|
||||
cd QuantDinger && \
|
||||
cp docker.env.example backend_api_python/.env && \
|
||||
docker-compose up -d --build
|
||||
|
||||
# 後續啟動 (無需重新構建)
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
**Windows (PowerShell)**
|
||||
```powershell
|
||||
git clone https://github.com/brokermr810/QuantDinger.git
|
||||
cd QuantDinger
|
||||
Copy-Item docker.env.example backend_api_python/.env
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
#### 2. 訪問與配置
|
||||
|
||||
- **前端 UI**: http://localhost
|
||||
- **默認賬號**: `quantdinger` / `123456`
|
||||
|
||||
> **注意**：為了使用 AI 功能或生產環境安全，請編輯 `backend_api_python/.env`（添加 `OPENROUTER_API_KEY`，修改密碼），然後執行 `docker-compose restart backend` 重啟服務。
|
||||
|
||||
#### 3. 訪問應用
|
||||
|
||||
- **前端 UI**: http://localhost
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@ services:
|
||||
container_name: quantdinger-backend
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "5000:5000"
|
||||
- "127.0.0.1:5000:5000"
|
||||
volumes:
|
||||
# Persistent database and logs
|
||||
- ./backend_api_python/quantdinger.db:/app/quantdinger.db
|
||||
|
||||
Vendored
+257
-209
@@ -37,254 +37,290 @@
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* 像素风格小狗奔跑动画 */
|
||||
.pixel-dog-container {
|
||||
/* 像素风格小猫奔跑动画容器 */
|
||||
.pixel-cat-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
height: 120px;
|
||||
margin: 0 auto 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pixel-dog {
|
||||
/* 像素小猫主体 */
|
||||
.pixel-cat {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 30px;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
animation: dogRun 0.5s steps(4) infinite, dogMove 4s linear infinite;
|
||||
bottom: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
animation: catRun 0.4s steps(2) infinite, catMove 3.5s linear infinite;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
/* 所有像素元素都使用锐利边缘 */
|
||||
.pixel-dog * {
|
||||
.pixel-cat * {
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
/* 狗头 - 黑白相间设计，使用简单的几何形状 */
|
||||
.dog-head {
|
||||
/* 猫头 - 像素方块组成 */
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
left: 2px;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #000;
|
||||
clip-path: polygon(15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%, 0% 25%);
|
||||
border: 2px solid #000;
|
||||
box-sizing: border-box;
|
||||
animation: headBob 0.5s steps(4) infinite;
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background:
|
||||
/* 头部主体白色 */
|
||||
linear-gradient(#fff, #fff) 2px 4px / 12px 10px no-repeat,
|
||||
/* 左半脸黑色斑块 */
|
||||
linear-gradient(#000, #000) 2px 4px / 6px 10px no-repeat,
|
||||
/* 头顶 */
|
||||
linear-gradient(#fff, #fff) 4px 2px / 8px 2px no-repeat;
|
||||
animation: headBob 0.4s steps(2) infinite;
|
||||
}
|
||||
|
||||
@keyframes headBob {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
25% { transform: translateY(-2px) rotate(-2deg); }
|
||||
50% { transform: translateY(0px) rotate(0deg); }
|
||||
75% { transform: translateY(-1px) rotate(1deg); }
|
||||
/* 左耳 - 黑色尖耳朵 */
|
||||
.cat-ear-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -2px;
|
||||
width: 4px;
|
||||
height: 6px;
|
||||
background:
|
||||
linear-gradient(#000, #000) 0px 4px / 4px 2px no-repeat,
|
||||
linear-gradient(#000, #000) 1px 2px / 2px 2px no-repeat,
|
||||
linear-gradient(#000, #000) 1px 0px / 2px 2px no-repeat;
|
||||
}
|
||||
|
||||
/* 左半部分（白色） */
|
||||
.dog-head::before {
|
||||
/* 右耳 - 白色尖耳朵 */
|
||||
.cat-ear-right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -2px;
|
||||
width: 4px;
|
||||
height: 6px;
|
||||
background:
|
||||
linear-gradient(#fff, #fff) 0px 4px / 4px 2px no-repeat,
|
||||
linear-gradient(#fff, #fff) 1px 2px / 2px 2px no-repeat,
|
||||
linear-gradient(#fff, #fff) 1px 0px / 2px 2px no-repeat;
|
||||
box-shadow: inset 0 0 0 1px #000;
|
||||
}
|
||||
|
||||
.cat-ear-right::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||||
width: 4px;
|
||||
height: 6px;
|
||||
border: 1px solid #000;
|
||||
border-width: 0 1px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 左耳（白色三角形） */
|
||||
.dog-ear-left {
|
||||
/* 左眼 - 黑底白眼（在黑色区域） */
|
||||
.cat-eye-left {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
/* 右耳（黑色三角形） */
|
||||
.dog-ear-right {
|
||||
.cat-eye-left::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 2px;
|
||||
top: 1px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #000;
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
/* 左眼（黑色点在白色区域） */
|
||||
.dog-eye-left {
|
||||
/* 右眼 - 白底黑眼（在白色区域） */
|
||||
.cat-eye-right {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 14px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #000;
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
/* 右眼（白色点在黑色区域） */
|
||||
.dog-eye-right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 14px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
right: 2px;
|
||||
top: 6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
/* 鼻子（黑色，中间） */
|
||||
.dog-nose {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, 30%);
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
background: #000;
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
/* 身体 - 黑白相间 */
|
||||
.dog-body {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 36px;
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
background: #000;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dog-body::before {
|
||||
.cat-eye-right::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 左前腿 */
|
||||
.dog-leg-front-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 48px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
left: 1px;
|
||||
top: 0px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #000;
|
||||
border-radius: 0;
|
||||
animation: legMoveFront 0.5s steps(4) infinite;
|
||||
}
|
||||
|
||||
/* 右前腿 */
|
||||
.dog-leg-front-right {
|
||||
/* 鼻子 - 小粉色方块 */
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 48px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
animation: legMoveFront 0.5s steps(4) infinite 0.125s;
|
||||
left: 7px;
|
||||
top: 10px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* 左后腿 */
|
||||
.dog-leg-back-left {
|
||||
/* 胡须 - 像素线条 */
|
||||
.cat-whiskers {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 16px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.cat-whiskers::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
box-shadow: 0 2px 0 #000;
|
||||
}
|
||||
|
||||
.cat-whiskers::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
box-shadow: 0 2px 0 #000;
|
||||
}
|
||||
|
||||
/* 身体 - 黑白相间像素块 */
|
||||
.cat-body {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 14px;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
background:
|
||||
/* 白色部分 */
|
||||
linear-gradient(#fff, #fff) 6px 0 / 8px 10px no-repeat,
|
||||
/* 黑色部分 */
|
||||
linear-gradient(#000, #000) 0 0 / 8px 10px no-repeat;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 前腿 - 左 (黑色) */
|
||||
.cat-leg-front-left {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 48px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
top: 22px;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
animation: legFront 0.2s steps(2) infinite;
|
||||
}
|
||||
|
||||
/* 前腿 - 右 (白色带边框) */
|
||||
.cat-leg-front-right {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 22px;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
animation: legMoveBack 0.5s steps(4) infinite 0.125s;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
animation: legFront 0.2s steps(2) infinite 0.1s;
|
||||
}
|
||||
|
||||
/* 右后腿 */
|
||||
.dog-leg-back-right {
|
||||
/* 后腿 - 左 (白色带边框) */
|
||||
.cat-leg-back-left {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
top: 48px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
background: #000;
|
||||
border-radius: 0;
|
||||
animation: legMoveBack 0.5s steps(4) infinite;
|
||||
left: 3px;
|
||||
top: 22px;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
animation: legBack 0.2s steps(2) infinite 0.1s;
|
||||
}
|
||||
|
||||
/* 尾巴 */
|
||||
.dog-tail {
|
||||
/* 后腿 - 右 (黑色) */
|
||||
.cat-leg-back-right {
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: 38px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background: #000;
|
||||
border-radius: 0;
|
||||
animation: tailWag 0.25s ease-in-out infinite alternate;
|
||||
animation: legBack 0.2s steps(2) infinite;
|
||||
}
|
||||
|
||||
/* 奔跑动画 - 上下跳动（像素风格，使用steps） */
|
||||
@keyframes dogRun {
|
||||
0% { transform: translateY(0px); }
|
||||
25% { transform: translateY(-4px); }
|
||||
50% { transform: translateY(0px); }
|
||||
75% { transform: translateY(-2px); }
|
||||
100% { transform: translateY(0px); }
|
||||
/* 尾巴 - 长且弯曲的像素尾巴 */
|
||||
.cat-tail {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
background:
|
||||
/* 尾巴根部 */
|
||||
linear-gradient(#000, #000) 0 6px / 3px 3px no-repeat,
|
||||
/* 尾巴中部 */
|
||||
linear-gradient(#000, #000) 3px 4px / 3px 3px no-repeat,
|
||||
/* 尾巴弯曲 */
|
||||
linear-gradient(#000, #000) 6px 2px / 3px 3px no-repeat,
|
||||
/* 尾巴尖端 */
|
||||
linear-gradient(#000, #000) 9px 0 / 3px 3px no-repeat;
|
||||
animation: tailWag 0.3s steps(2) infinite alternate;
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
/* 奔跑动画 - 轻微上下跳动 */
|
||||
@keyframes catRun {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-3px); }
|
||||
}
|
||||
|
||||
/* 移动动画 - 左右移动 */
|
||||
@keyframes dogMove {
|
||||
@keyframes catMove {
|
||||
0% { left: -40px; }
|
||||
100% { left: calc(100% + 40px); }
|
||||
}
|
||||
|
||||
/* 前腿动画 - 像素风格步进 */
|
||||
@keyframes legMoveFront {
|
||||
0% { transform: translateY(0px); }
|
||||
25% { transform: translateY(-8px); }
|
||||
50% { transform: translateY(0px); }
|
||||
75% { transform: translateY(-4px); }
|
||||
100% { transform: translateY(0px); }
|
||||
/* 前腿动画 */
|
||||
@keyframes legFront {
|
||||
0%, 100% { transform: rotate(-15deg); }
|
||||
50% { transform: rotate(15deg); }
|
||||
}
|
||||
|
||||
/* 后腿动画 - 像素风格步进 */
|
||||
@keyframes legMoveBack {
|
||||
0% { transform: translateY(0px); }
|
||||
25% { transform: translateY(-4px); }
|
||||
50% { transform: translateY(0px); }
|
||||
75% { transform: translateY(-8px); }
|
||||
100% { transform: translateY(0px); }
|
||||
/* 后腿动画 */
|
||||
@keyframes legBack {
|
||||
0%, 100% { transform: rotate(15deg); }
|
||||
50% { transform: rotate(-15deg); }
|
||||
}
|
||||
|
||||
/* 尾巴摆动 */
|
||||
@keyframes tailWag {
|
||||
0% { transform: rotate(-12deg); }
|
||||
100% { transform: rotate(12deg); }
|
||||
0% { transform: rotate(-10deg); }
|
||||
100% { transform: rotate(10deg); }
|
||||
}
|
||||
|
||||
/* 头部轻微摆动 */
|
||||
@keyframes headBob {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
25% { transform: translateY(-2px) rotate(-2deg); }
|
||||
50% { transform: translateY(0px) rotate(0deg); }
|
||||
75% { transform: translateY(-1px) rotate(1deg); }
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-1px); }
|
||||
}
|
||||
|
||||
/* 地面效果 - 像素风格 */
|
||||
@@ -293,23 +329,21 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 16px;
|
||||
height: 12px;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
#333 0px,
|
||||
#333 8px,
|
||||
#666 8px,
|
||||
#666 16px
|
||||
#222 0px,
|
||||
#222 6px,
|
||||
#555 6px,
|
||||
#555 12px
|
||||
);
|
||||
animation: groundMove 0.4s linear infinite;
|
||||
animation: groundMove 0.3s linear infinite;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
@keyframes groundMove {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 16px 0; }
|
||||
100% { background-position: 12px 0; }
|
||||
}
|
||||
|
||||
/* 品牌文字 */
|
||||
@@ -341,28 +375,41 @@
|
||||
.ground {
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
#666 0px,
|
||||
#666 8px,
|
||||
#444 8px,
|
||||
#444 16px
|
||||
#555 0px,
|
||||
#555 6px,
|
||||
#333 6px,
|
||||
#333 12px
|
||||
);
|
||||
}
|
||||
|
||||
/* 暗色模式下白色部分改成浅灰 */
|
||||
.cat-head {
|
||||
background:
|
||||
linear-gradient(#ddd, #ddd) 2px 4px / 12px 10px no-repeat,
|
||||
linear-gradient(#000, #000) 2px 4px / 6px 10px no-repeat,
|
||||
linear-gradient(#ddd, #ddd) 4px 2px / 8px 2px no-repeat;
|
||||
}
|
||||
|
||||
.cat-body {
|
||||
background:
|
||||
linear-gradient(#ddd, #ddd) 6px 0 / 8px 10px no-repeat,
|
||||
linear-gradient(#000, #000) 0 0 / 8px 10px no-repeat;
|
||||
}
|
||||
|
||||
.cat-leg-front-right,
|
||||
.cat-leg-back-left {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.cat-eye-left,
|
||||
.cat-eye-right {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保像素风格在所有浏览器中正确显示 */
|
||||
.pixel-dog,
|
||||
.dog-head,
|
||||
.dog-body,
|
||||
.dog-leg-front-left,
|
||||
.dog-leg-front-right,
|
||||
.dog-leg-back-left,
|
||||
.dog-leg-back-right,
|
||||
.dog-tail,
|
||||
.dog-ear-left,
|
||||
.dog-ear-right,
|
||||
.dog-eye-left,
|
||||
.dog-eye-right,
|
||||
.dog-nose {
|
||||
.pixel-cat,
|
||||
.pixel-cat * {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
@@ -371,8 +418,8 @@
|
||||
|
||||
/* 手机端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.pixel-dog-container {
|
||||
transform: scale(1.2);
|
||||
.pixel-cat-container {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.first-loading-wrp > h2 {
|
||||
@@ -398,22 +445,23 @@
|
||||
<div class="first-loading-wrp">
|
||||
<h2>Landing</h2>
|
||||
<div class="loading-wrp">
|
||||
<div class="pixel-dog-container">
|
||||
<div class="pixel-cat-container">
|
||||
<div class="ground"></div>
|
||||
<div class="pixel-dog">
|
||||
<div class="dog-head">
|
||||
<div class="dog-ear-left"></div>
|
||||
<div class="dog-ear-right"></div>
|
||||
<div class="dog-eye-left"></div>
|
||||
<div class="dog-eye-right"></div>
|
||||
<div class="dog-nose"></div>
|
||||
<div class="pixel-cat">
|
||||
<div class="cat-head">
|
||||
<div class="cat-ear-left"></div>
|
||||
<div class="cat-ear-right"></div>
|
||||
<div class="cat-eye-left"></div>
|
||||
<div class="cat-eye-right"></div>
|
||||
<div class="cat-nose"></div>
|
||||
<div class="cat-whiskers"></div>
|
||||
</div>
|
||||
<div class="dog-body"></div>
|
||||
<div class="dog-leg-front-left"></div>
|
||||
<div class="dog-leg-front-right"></div>
|
||||
<div class="dog-leg-back-left"></div>
|
||||
<div class="dog-leg-back-right"></div>
|
||||
<div class="dog-tail"></div>
|
||||
<div class="cat-body"></div>
|
||||
<div class="cat-leg-front-left"></div>
|
||||
<div class="cat-leg-front-right"></div>
|
||||
<div class="cat-leg-back-left"></div>
|
||||
<div class="cat-leg-back-right"></div>
|
||||
<div class="cat-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user