iT邦幫忙

2025 iThome 鐵人賽
DAY 28
0
Modern Web

FlowNest系列 第 28 篇

Day28_生成頭像功能+登入動畫

17th鐵人賽
26 瀏覽

  • 分享至 

  • xImage
    •  

一、AI生成頭像功能

右上角新增「帳戶設置」：進去就有 AI頭像工作室，輸入 prompt 直接生 512×512 圓形頭像。

註：出圖尺寸固定 512×512，頭像裁成圓形，避免各處顯示比例不一致。

生成頭像

二、帳戶設置頁補齊

把帳戶設定補成一個完整的頁面，除了AI頭像外，也能直接管理自己的資料。

  • 顯示名稱編輯：修改後會即時刷新，導覽列與個人資料立刻同步。
  • 寄送重設密碼信：按一下就把重設連結寄到登入用的 Email，不用另外跑流程。
    https://ithelp.ithome.com.tw/upload/images/20251009/20168406EroDCO4NVX.png

三、登入頁面互動

  • 密碼欄右側新增「眼睛」按鈕可切換顯示/隱藏。
  • 新增動畫，眼睛會平時環顧、聚焦密碼欄時明顯朝右看；顯示密碼時瞳孔放大＋張嘴，更有互動感。
    登入動畫

四、更新註冊流程

在登入頁按「建立新帳號」就展開註冊表單（暱稱／Email／密碼／確認密碼），送出後明確提示 「註冊成功，請用 Email + 密碼登入」。
https://ithelp.ithome.com.tw/upload/images/20251009/20168406vSQHkCCl04.png


上一篇
Day27_3D模組延遲載入與建置修正
下一篇
Day29_整體架構與資料流總覽
系列文
FlowNest 共 29 篇
  1. 25
    Day25_底部播放器上線
  2. 26
    Day26_滿版播放器與介面改版
  3. 27
    Day27_3D模組延遲載入與建置修正
  4. 28
    Day28_生成頭像功能+登入動畫
  5. 29
    Day29_整體架構與資料流總覽
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
17590 篇
完賽人數
218 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 17th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙