使用vue js 设计炫酷的登录页面
时间: 2024-06-09 11:05:22 浏览: 7
好的,我们可以通过 Vue.js 和一些 CSS 动画来设计一个炫酷的登录页面。以下是一个简单的示例:
首先,我们需要创建一个 Vue 组件来包含登录页面的所有内容。这个组件可以包含一个表单,用于输入用户名和密码,以及一个登录按钮。
```
<template>
<div class="login-container">
<form>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
</div>
<button class="login-btn" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: ""
}
},
methods: {
login() {
// Handle login logic here
}
}
}
</script>
<style>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
label {
font-weight: bold;
margin-bottom: 0.5rem;
}
input[type="text"],
input[type="password"] {
border: none;
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 1rem;
}
.login-btn {
background-color: #007aff;
color: #fff;
border: none;
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.login-btn:hover {
transform: scale(1.05);
}
</style>
```
现在让我们添加一些动画效果,使登录按钮在鼠标悬停时变得更加炫酷。
我们可以使用 Vue.js 的 `transition` 组件来添加动画效果。首先,我们需要在 `template` 标签中将按钮包装在 `transition` 标签中,并设置 `name` 属性。然后,我们可以使用 CSS 来为这个过渡添加动画效果。
```
<transition name="btn">
<button class="login-btn" @click.prevent="login">Login</button>
</transition>
<style>
.btn-enter-active,
.btn-leave-active {
transition: all 0.2s ease-in-out;
}
.btn-enter,
.btn-leave-to {
transform: scale(0.9);
}
</style>
```
现在,当我们将鼠标悬停在按钮上时,它将缩放为原来的 1.05 倍大小,并在 0.2 秒内过渡回去。这使得登录按钮看起来更加炫酷和动态。
最后,我们可以添加更多的 CSS 样式来使整个登录页面更加炫酷。例如,我们可以添加背景图像、渐变和其他动画。
```
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba");
background-size: cover;
background-position: center;
}
form {
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.8);
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.login-btn {
background-color: #007aff;
color: #fff;
border: none;
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
background-image: linear-gradient(to right, #007aff, #00d4ff);
}
.login-btn:hover {
transform: scale(1.05) rotate(5deg);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
```
以上是一个简单的示例,你可以根据自己的需求和喜好来设计一个更加炫酷的登录页面。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)