小程序酷炫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>
