小程序酷炫3D登录页源码(泥陶态)
1. 页面效果
登陆页面一般都要酷炫好看一点,这里分享一个泥陶态3D登录页面。泥陶态是结合 3D 设计流行风格而兴起的新形态。
设计趋势由拟物风格发展为扁平风格时,去掉了一切表示深度和层叠的效果,虽然视觉上简化了,但不容易表现空间关系。
这里使用https://codeadrian.github.io/clay.css/ 可以动态生成泥陶态的样式,非常好用简单。如果要了解更多的新型风格可以参考我的之前的博客 拟物风格的小程序附源码。里边有很多资源可以学习交流下。
这里我们先看下页面效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/185764ee9ad340c88928e9fdc03e2241.png)
2. 代码内容
<template>
<view class="login-page">
<div class="container clay card">
<form>
<h3 style="color: black">Eric的平台</h3>
<div class="inputBox">
<span>用户名</span>
<div class="box">
<div class="icon clay2 card2"><u-icon name="account-fill" color="#2979ff" size="38"></u-icon></div>
<input class="clay2 card2" type="text">
</div>
</div>
<div class="inputBox">
<span>密码</span>
<div class="box">
<div class="icon clay2 card2"><u-icon name="lock-fill" color="#2979ff" size="38"></u-icon></div>
<input class="clay2 card2" type="password">
</div>
</div>
<div class="inputBox">
<div class="box">
<input class="clay card" type="submit" value="登 录">
</div>
</div>
<div style="display: flex;color:#2b85e4;font-size: 28rpx;font-weight: bold">
<a href="#" class="forgot">注册账户</a>
<a href="#" class="forgot" style="margin-left: 20rpx">找回密码</a>
<a href="#" class="forgot" style="margin-left: 20rpx">微信登录</a>
</div>
</form>
</div>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(option) {
uni.hideHomeButton()
},
methods: {
}
}
</script>
<style>
.clay{background:var(--clay-background,rgba(0,0,0,.005));border-radius:var(--clay-border-radius,32px);box-shadow:var(--clay-shadow-outset,8px 8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-primary,-8px -8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-secondary,8px 8px 16px 0 hsla(0,0%,100%,.2))}
.clay2{background:var(--clay-background,rgba(0,0,0,.005));border-radius:var(--clay-border-radius,32px);box-shadow:var(--clay-shadow-outset,8rpx 8rpx 16rpx 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-primary,-8rpx -8rpx 16rpx 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-secondary,8rpx 8rpx 16rpx 0 hsla(0,0%,100%,.2))}
.card{
--clay-background: #157DFB;
--clay-border-radius: 48px;
color: #f1f1f1;
}
.card2{
--clay-background: #FFFFFF;
--clay-border-radius: 48px;
color: #f1f1f1;
}
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/*background: #2f363e;*/
}
.container
{
color: black;
position: relative;
width: 630rpx;
min-height: 64vh;
display: flex;
justify-content: center;
align-items: center;
background: #FFFFFF;
border-radius: 60rpx;
padding: 50rpx;
}
form
{
position: relative;
width: 100%;
}
.container h3
{
font-weight: 600;
font-size: 2em;
width: 100%;
text-align: center;
margin-bottom: 30px;
letter-spacing: 2px;
text-transform: uppercase;
}
.inputBox
{
position: relative;
width: 100%;
margin-bottom: 20px;
}
.inputBox span
{
display: inline-block;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 28rpx;
font-weight: bolder;
border-left: 4px solid black;
padding-left: 4px;
line-height: 1em;
}
.inputBox .box
{
display: flex;
}
.inputBox .box .icon
{
position: relative;
min-width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-right: 10px;
font-size: 1.15em;
}
.inputBox .box input
{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 10px 20px;
border-radius: 25rpx;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 28rpx;
color: black;
}
.inputBox .box input[type="submit"]
{
/*background: #1f83f2;*/
/*box-shadow: 5px 5px 7px rgba(0,0,0,0.25),*/
/*inset 2px 2px 5px rgba(255,255,255,0.25),*/
/*inset -3px -3px 5px rgba(0,0,0,0.5);*/
color: #fff;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
margin-top: 40rpx;
font-size: 42rpx;
text-align: center;
}
.inputBox .box input[type="submit"]:hover
{
filter: brightness(1.1);
}
label
{
/*color: #fff;*/
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85em;
display: flex;
align-items: center;
}
label input
{
margin-right: 5px;
}
.forgot
{
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
}
</style>