小程序酷炫3D登录页源码（泥陶态）

小程序酷炫3D登录页源码（泥陶态）

1. 页面效果

登陆页面一般都要酷炫好看一点，这里分享一个泥陶态3D登录页面。泥陶态是结合 3D 设计流行风格而兴起的新形态。

设计趋势由拟物风格发展为扁平风格时，去掉了一切表示深度和层叠的效果，虽然视觉上简化了，但不容易表现空间关系。

这里使用https://codeadrian.github.io/clay.css/ 可以动态生成泥陶态的样式，非常好用简单。如果要了解更多的新型风格可以参考我的之前的博客 拟物风格的小程序附源码。里边有很多资源可以学习交流下。

这里我们先看下页面效果

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>