Vue3?登錄頁懸浮動畫和細膩交互的hover效果實現(xiàn)
更新時間：2026年05月29日 11:01:36 作者：程序員大華
這篇文章主要介紹了Vue3登錄頁懸浮動畫和細膩交互的hover效果實現(xiàn)的相關(guān)資料,這樣的效果可以讓表單在視覺上更具層次感、反饋更及時,需要的朋友可以參考下
前言
大家好，我是大華！在現(xiàn)代 Web 開發(fā)中，用戶體驗越來越重要。一個簡潔、美觀又富有動效的登錄頁，不僅能提升品牌形象，還能增強用戶的第一印象。這篇文章，我們將用 Vue3 + CSS3 動畫，來實現(xiàn)一個懸浮動畫和細膩交互效果的 Vue3 登錄頁面。
項目效果預(yù)覽：
- 登錄框懸浮微動 + 高光掠過動畫
- 輸入框標(biāo)簽滑動 + 聚焦反饋
- 按鈕點擊漣漪動效
- 浮動光點循環(huán)上升
- 忘記密碼/注冊鏈接懸停切換背景色
技術(shù)棧
- Vue 3（
<script setup>語法） - Composition API（
ref,onMounted） - CSS3 漸變、動畫、過渡、偽元素
- 響應(yīng)式布局基礎(chǔ)
一、頁面結(jié)構(gòu)（Template 部分）
<template>
<div class="login-page" @mousemove="handleMouseMove">
<div class="login-container">
<!-- 浮動裝飾圖標(biāo) -->
<div class="floating-icons">
<span
v-for="(icon, index) in icons"
:key="index"
:style="{
left: icon.left + 'px',
top: icon.top + 'px',
width: icon.size + 'px',
height: icon.size + 'px',
animationDuration: (10 + Math.random() * 20) + 's',
animationDelay: (Math.random() * 5) + 's'
}"
></span>
</div>
<!-- 標(biāo)題 -->
<h2>歡迎登錄</h2>
<!-- 登錄表單 -->
<form @submit.prevent="handleSubmit">
<!-- 用戶名輸入 -->
<div class="input-group">
<input type="text" required v-model="username">
<label>用戶名</label>
</div>
<!-- 密碼輸入 -->
<div class="input-group">
<input type="password" required v-model="password">
<label>密碼</label>
</div>
<!-- 登錄按鈕 -->
<button type="submit" class="btn">登 錄</button>
<!-- 輔助鏈接 -->
<div class="links">
<a href="#" rel="external nofollow" rel="external nofollow" @mouseenter="changeBgColor('#a1c4fd')">忘記密碼?</a>
<a href="#" rel="external nofollow" rel="external nofollow" @mouseenter="changeBgColor('#fbc2eb')">注冊賬號</a>
</div>
</form>
</div>
</div>
</template>
?? 說明：
@mousemove="handleMouseMove"實現(xiàn)背景隨鼠標(biāo)移動而旋轉(zhuǎn)漸變。floating-icons是背景中漂浮的圓形光點，通過v-for渲染多個。- 表單提交使用
@submit.prevent阻止默認刷新行為。
二、邏輯實現(xiàn)（Script 部分）
<script setup>
import { ref, onMounted } from 'vue';
// 用戶輸入數(shù)據(jù)
const username = ref('');
const password = ref('');
// 浮動圖標(biāo)數(shù)據(jù)
const icons = ref([]);
// 生成浮動圖標(biāo)
const createIcons = () => {
const iconsCount = 10;
const newIcons = [];
for (let i = 0; i < iconsCount; i++) {
newIcons.push({
left: Math.random() * 380, // 隨機水平位置
top: Math.random() * 400, // 隨機起始高度
size: 20 + Math.random() * 30 // 隨機大小（20~50px）
});
}
icons.value = newIcons;
};
// 表單提交
const handleSubmit = () => {
alert(`歡迎, ${username.value}!`);
};
// 鼠標(biāo)懸停鏈接時改變背景色
const changeBgColor = (color) => {
document.body.style.background = `linear-gradient(45deg, ${color}, ${color.replace(')', '')}80)`;
};
// 鼠標(biāo)移動時動態(tài)改變背景角度
const handleMouseMove = (e) => {
const x = e.clientX / window.innerWidth; // 0 ~ 1
const angle = x * 180; // 0 ~ 180deg
document.body.style.background = `linear-gradient(${angle}deg, #ff9a9e, #fad0c4)`;
};
// 組件掛載后初始化圖標(biāo)
onMounted(() => {
createIcons();
});
</script>
?? 關(guān)鍵點解析：
createIcons()在頁面加載時生成 10 個隨機位置和大小的“光點”。handleMouseMove根據(jù)鼠標(biāo) X 坐標(biāo)控制漸變角度，實現(xiàn)“視角跟隨”效果。changeBgColor在鼠標(biāo)進入鏈接時切換背景主題色，增強交互反饋。
三、樣式設(shè)計（Style 部分）
1. 全局重置與字體
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}2. 頁面容器.login-page
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
transition: background 0.5s ease;
}使用flex居中，背景為粉色系漸變，支持過渡動畫。
3. 登錄框.login-container
.login-container {
position: relative;
width: 380px;
padding: 40px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px); /* 毛玻璃效果 */
border-radius: 20px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.login-container:hover {
transform: translateY(-5px);
box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
}
backdrop-filter: blur(10px) 實現(xiàn)毛玻璃質(zhì)感，極具現(xiàn)代感！
4. 懸停高光掠過動畫
.login-container::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: 0.5s;
}
.login-container:hover::before {
left: 100%;
}當(dāng)鼠標(biāo)懸停時，一束高光從左向右掃過登錄框，視覺沖擊力強。
5. 輸入框動效
.input-group input {
width: 100%;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.2);
border: none;
outline: none;
border-radius: 35px;
color: #fff;
font-size: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.input-group input:focus, .input-group input:hover {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.input-group label {
position: absolute;
top: 15px;
left: 20px;
color: rgba(255, 255, 255, 0.8);
pointer-events: none;
transition: all 0.3s ease;
}
.input-group input:focus + label,
.input-group input:valid + label {
top: -10px;
left: 15px;
font-size: 12px;
background: rgba(255, 255, 255, 0.2);
padding: 0 10px;
border-radius: 10px;
}
實現(xiàn) Material Design 風(fēng)格的標(biāo)簽上滑動效，用戶體驗極佳。
6. 登錄按鈕動效
.btn {
width: 100%;
padding: 15px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
border: none;
border-radius: 35px;
color: #fff;
font-weight: 600;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: 0.5s;
}
.btn:hover::before {
left: 100%;
}
懸停時按鈕上浮 + 高光掃過，交互感滿分！
7. 浮動光點動畫
.floating-icons {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.floating-icons span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 15s linear infinite;
opacity: 0;
}
.login-container:hover .floating-icons span {
opacity: 1;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
}
}
? 光點在登錄框懸停時浮現(xiàn)，并向上漂浮、旋轉(zhuǎn)、淡出，營造夢幻氛圍。
四、完整代碼
優(yōu)化建議
- 性能優(yōu)化：浮動圖標(biāo)數(shù)量可控制，避免過多影響性能。
- 響應(yīng)式：添加
@media查詢適配移動端。 - 表單驗證：增加正則校驗、非空判斷。
- 主題切換：封裝背景色切換邏輯為
themeService。 - 動畫庫：可接入
Animate.css或GSAP增強動效。
總結(jié)
這篇文章一步步實現(xiàn)了一個高顏值、強交互的 Vue3 登錄頁，涵蓋了：
- Vue3 Composition API 使用
- 動態(tài)樣式綁定
- 鼠標(biāo)事件監(jiān)聽
- CSS3 動畫與過渡
- 毛玻璃（backdrop-filter）特效
- 漸變背景與視覺動效
這個登錄頁不僅適合個人項目、后臺系統(tǒng)、SaaS 平臺，還可以作為你作品集中的亮點之一。
到此這篇關(guān)于Vue3登錄頁懸浮動畫和細膩交互的hover效果實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3登錄頁懸浮hover內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue項目中,有些我們會遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue3+three.js實現(xiàn)疫情可視化,本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果
本文主要介紹了???????基于el-table和el-pagination實現(xiàn)數(shù)據(jù)的分頁效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
開發(fā)過程中，如果后端一次性返回你1000多條圖片或數(shù)據(jù)，那我們前端應(yīng)該怎么用什么思路去更好的渲染呢？這篇文章主要介紹了vue處理一千張圖片進行分頁加載,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家介紹了vue篇之事件總線EventBus使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
搜索功能在后臺管理頁面中非常常見，這篇文章就著重講一下vue3-admin-element框架中如何實現(xiàn)一個頂部多條件搜索功能，感興趣的小伙伴可以了解一下2023-08-08