小程序酷炫3D登录页源码(泥陶态)

简介: 小程序酷炫3D登录页源码(泥陶态)

小程序酷炫3D登录页源码(泥陶态)

1. 页面效果

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

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


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


这里我们先看下页面效果


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>


目录
相关文章
|
7天前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
7天前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
9天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
2月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
134 0
|
3月前
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
244 8
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
459 12
|
5月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
6月前
|
小程序 Java 关系型数据库
weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
本文介绍了一款大学生就业平台微信小程序的开发过程,涵盖开发环境、系统设计、实现与测试等方面。该小程序基于微信平台特性,采用MYSQL数据库存储数据,确保系统稳定与安全,同时满足学生、企业和管理员不同权限用户的功能需求。通过简化操作流程,实现了招聘信息查看、简历投递等实用功能,旨在为用户提供便捷高效的求职体验,符合“操作简单,功能实用”的设计理念。
|
6月前
|
小程序 Java 关系型数据库
weixin030英语学习交流平台小程序+ssm(文档+源码)_kaic
本文介绍了英语学习交流平台小程序的开发全过程,包括系统分析、设计与实现。该小程序基于Java的SSM框架进行后端管理开发,使用MySQL作为数据库,并借助微信开发者工具确保系统稳定性。小程序设有管理员和用户两个角色,功能涵盖个人中心、每日打卡、学习计划、论坛交流等,具有操作简单、界面清晰、功能齐全的特点。通过技术可行性、经济可行性和操作可行性分析,证明了系统的实用性和高效性,为英语学习者提供了一个便捷的交流平台。
|
5月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。

热门文章

最新文章