vue有创意的登陆页面
时间: 2023-08-10 07:02:44 浏览: 44
以下是一个简单的创意登录页面示例,使用Vue.js和CSS3动画效果:
```html
<template>
<div class="login-container">
<div class="login-box">
<h1>Login</h1>
<form>
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" v-model="username" />
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" v-model="password" />
</div>
<button class="login-button" @click.prevent="login">Login</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 实现登录逻辑
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.login-box {
position: relative;
width: 400px;
height: 500px;
background-color: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
animation: login 1s ease-in-out both;
}
.input-group {
margin-top: 50px;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
text-align: left;
}
input[type='text'],
input[type='password'] {
width: 80%;
padding: 10px;
border: none;
border-bottom: 2px solid #ccc;
font-size: 18px;
outline: none;
}
.login-button {
display: block;
margin: 50px auto 0;
padding: 10px 30px;
border: none;
border-radius: 30px;
background-color: #f6d743;
color: white;
font-size: 22px;
font-weight: bold;
outline: none;
cursor: pointer;
transition: transform 0.3s ease;
}
.login-button:hover {
transform: scale(1.1);
}
@keyframes login {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
</style>
```
这是一个简单的登录页面示例,具有以下特点:
- 使用Vue.js框架实现数据绑定和事件处理
- 使用CSS3动画效果实现页面进入动画
- 使用flexbox和CSS定位实现布局和居中对齐
- 使用CSS样式对输入框和按钮进行美化
你可以根据自己的喜好和需求对其进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)