当前位置：首页 > news >正文

HTML+CSS 水滴登录页

news 2025/10/26 4:45:57

文章目录

一、效果演示
二、Code
- 1.HTML
- 2.CSS
三、实现思路拆分

一、效果演示

在这里插入图片描述

实现了一个水滴登录页的效果。页面包含一个水滴形状的登录框和两个按钮，登录框包括用户名、密码和登录按钮，按钮分别为忘记密码和注册。整个页面的设计非常有创意，采用了水滴形状和渐变色的设计，使得页面看起来非常美观和舒适。同时，登录框和按钮的动态效果也增强了页面的交互性和视觉效果。

二、Code

1.HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水滴登录页</title><link rel="stylesheet" href="./68-水滴登录页.css">
</head><body><div class="box"><div class="content"><h2>登录</h2><div><input type="text" placeholder="请输入用户名"></div><div><input type="password" placeholder="请输入密码"></div><div><input type="submit" value="登录"></div></div><a href="#" class="btns">忘记密码</a><a href="#" class="btns register">注册</a></div>
</body></html>

2.CSS

* {margin: 0;padding: 0;box-sizing: border-box;
}body {height: 100vh;background: #eff0f4;overflow: hidden;
}.box {position: relative;display: flex;justify-content: space-between;margin: 150px auto;width: 470px;
}.box .content {position: relative;display: flex;flex-direction: column;justify-content: space-around;align-items: center;width: 350px;height: 350px;padding: 60px 20px;box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),inset -20px -20px 25px rgba(255, 255, 255, 0.9);
}.box .content {border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;transition: 0.5s;
}.box .content:hover {border-radius: 50%;
}.box .content::before {content: "";position: absolute;top: 50px;left: 85px;width: 35px;height: 35px;border-radius: 50%;background: #fff;opacity: 0.9;
}.box .content::after {content: "";position: absolute;top: 90px;left: 110px;width: 15px;height: 15px;border-radius: 50%;background: #fff;opacity: 0.9;
}.box .content div {position: relative;width: 225px;border-radius: 25px;box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),inset -2px -5px 10px rgba(255, 255, 255, 1),15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
}.box .content div::before {content: "";position: absolute;top: 8px;left: 50%;transform: translateX(-50%);width: 65%;height: 5px;background: rgba(255, 255, 255, 0.5);border-radius: 5px;
}.box .content input {width: 100%;border: none;outline: none;background: transparent;font-size: 16px;padding: 10px 15px;
}.box .content input[type="submit"] {color: #fff;cursor: pointer;
}.box .content div:last-child {width: 120px;background: #ff0f5b;box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);transition: 0.5s;
}.box .content div:last-child:hover {width: 150px;
}.btns {position: absolute;right: 0;bottom: 0;width: 120px;height: 120px;background: #c61dff;display: flex;justify-content: center;align-items: center;cursor: pointer;text-decoration: none;color: #fff;font-size: 14px;box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),15px 25px 10px rgba(190, 1, 254, 0.1), 15px 20px 20px rgba(190, 1, 254, 0.1),inset -10px -10px 15px rgba(255, 255, 255, 0.5);border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}.register {bottom: 150px;right: 0px;width: 80px;height: 80px;border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;background: #01b4ff;box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),15px 25px 10px rgba(1, 180, 255, 0.1), 15px 20px 20px rgba(1, 180, 255, 0.1),inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}.btns::before {content: "";position: absolute;top: 15px;left: 30px;width: 20px;height: 20px;border-radius: 50%;background: #fff;opacity: 0.45;
}.register::before {left: 20px;width: 15px;height: 15px;
}.btns {transition: 0.25s;
}.btns:hover {border-radius: 50%;
}

三、实现思路拆分

* {margin: 0;padding: 0;box-sizing: border-box;
}

重置所有元素的默认样式。

body {height: 100vh;background: #eff0f4;overflow: hidden;
}

设置页面的背景颜色和尺寸。

.box {position: relative;display: flex;justify-content: space-between;margin: 150px auto;width: 470px;
}

设置登录表单容器的布局、位置和尺寸。

.box .content {position: relative;display: flex;flex-direction: column;justify-content: space-around;align-items: center;width: 350px;height: 350px;padding: 60px 20px;box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),inset -20px -20px 25px rgba(255, 255, 255, 0.9);
}

设置登录表单内容的样式，包括3D效果和过渡动画。

.box .content::before {content: "";position: absolute;top: 50px;left: 85px;width: 35px;height: 35px;border-radius: 50%;background: #fff;opacity: 0.9;
}.box .content::after {content: "";position: absolute;top: 90px;left: 110px;width: 15px;height: 15px;border-radius: 50%;background: #fff;opacity: 0.9;
}

创建伪元素以增强水滴效果。

.box .content div {position: relative;width: 225px;border-radius: 25px;box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),inset -2px -5px 10px rgba(255, 255, 255, 1),15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
}

设置输入框容器的样式，包括阴影和边框圆角。

.box .content input {width: 100%;border: none;outline: none;background: transparent;font-size: 16px;padding: 10px 15px;
}

设置输入框的基本样式。

.box .content input[type="submit"] {color: #fff;cursor: pointer;
}

为提交按钮设置特定的样式。

.btns {position: absolute;right: 0;bottom: 0;width: 120px;height: 120px;background: #c61dff;display: flex;justify-content: center;align-items: center;cursor: pointer;text-decoration: none;color: #fff;font-size: 14px;box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),15px 25px 10px rgba(190, 1, 254, 0.1), 15px 20px 20px rgba(190, 1, 254, 0.1),inset -10px -10px 15px rgba(255, 255, 255, 0.5);border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}

设置忘记密码和注册按钮的样式，包括3D效果、阴影和过渡动画。

.register {bottom: 150px;right: 0px;width: 80px;height: 80px;border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;background: #01b4ff;box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),15px 25px 10px rgba(1, 180, 255, 0.1), 15px 20px 20px rgba(1, 180, 255, 0.1),inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}

为注册按钮设置特定的样式。

.btns::before {content: "";position: absolute;top: 15px;left: 30px;width: 20px;height: 20px;border-radius: 50%;background: #fff;opacity: 0.45;
}.register::before {left: 20px;width: 15px;height: 15px;
}.btns {transition: 0.25s;
}.btns:hover {border-radius: 50%;
}

为按钮添加悬停效果和装饰性伪元素。

HTML+CSS 水滴登录页

文章目录一、效果演示二、Code1.HTML2.CSS 三、实现思路拆分一、效果演示实现了一个水滴登录页的效果。页面包含一个水滴形状的登录框和两个按钮，登录框包括用户名、密码和登录按钮，按钮分别为忘记密码和注册。整个页面的设计非常有创意，采…...

编程日记 2024/9/29 10:27:21

基于Next.js和TailwindCss的TailwindCss

最近在研究 Next.js 和 TailwindCss ，这两天没事的时候就搞了一个 c。目前工具部署在 Vercel ，欢迎各位体验（能提出意见更好嘿嘿） 体验地址： https://icon.999872.xyz/ 图片预览 👇...

编程日记 2024/9/29 10:26:19

若依开源系统多数据源整合clickhouse数据库详细步骤

1.添加依赖【pom.xml文件】 <dependency><groupId>ru.yandex.clickhouse</groupId>...

编程日记 2024/9/29 10:25:18

Subdominator：一款针对漏洞奖励计划的子域名安全枚举工具

关于Subdominator Subdominator是一款针对漏洞奖励计划的子域名安全枚举工具，可用于在漏洞搜寻和侦察过程中进行被动子域名枚举。它旨在通过高效枚举子域名和各种免费被动资源来帮助研究人员和网络安全专业人员发现潜在的安全漏洞。 Subdominator 与各种免费和付费…...

编程日记 2024/9/29 10:23:16

[leetcode]516_最长回文子序列

给你一个字符串 s ，找出其中最长的回文子序列，并返回该序列的长度。子序列定义为：不改变剩余字符顺序的情况下，删除某些字符或者不删除任何字符形成的一个序列。示例 1： 输入：s "bbbab" 输出&a…...

编程日记 2024/9/29 10:21:14

电子相册|智能化电子相册|基于java的电子相册管理系统设计与实现(源码+数据库+文档)

电子相册管理系统目录基于java的电子相册管理系统设计与实现一、前言二、系统功能设计三、系统实现四、数据库设计 1、实体ER图五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取： 博主介绍：✌️大厂码农|毕设布道师&…...

编程日记 2024/9/29 10:20:11

linux项目_c语言：Makefile编写、动态库生成、添加动态库路径

一直想搞懂Linux中Makefile是怎么管理项目的，知识积累到一定程度后，我就做了一个自己的缩小项目去把剩下的细节搞清楚代码： Service.c: #include <stdio.h> #include "lib_sevr.h" int main(){printf("输入a, b的值…...

编程日记 2024/9/29 10:19:09

Python学习（1）：字典、DataFrame的创建方法

1. 字典的创建方法 1.1 直接创建 # 创建一个包含姓名和年龄的字典 person {"name": "Alice", "age": 25}print(person) # 输出：{name: Alice, age: 25} 1.2 使用 dict() 函数 # 使用键值对列表创建字典 person dict(name"…...

编程日记 2024/9/29 10:17:07

async await 介绍从0手动实现async await

1 async await介绍 async 和 await 是用于处理异步编程的语法糖，它们简化了异步操作的编写，使其看起来像同步代码。通过 async 标记一个函数为异步函数，返回的是一个 Promise 对象，而 await 用来暂停执行，直到 Promise…...

编程日记 2024/9/29 10:14:04

UDP校验和计算及网络中的校验和机制

UDP (User Datagram Protocol) 是一种无连接的传输层协议，它不像 TCP 那样提供可靠的传输保证。虽然 UDP 不保证数据可靠性，但它仍然提供了一个可选的校验和机制来检测数据在传输过程中出现的错误。理解UDP校验和的计算过程和其在网络中的作用至关重要。…...

编程日记 2024/9/29 10:13:03

如何使用C语言接入Doris数据库

如何使用C语言接入Doris数据库一、环境准备1. 安装MySQL C API2. Doris数据库环境二、编写C语言接入代码1. 包含必要的头文件2. 编写连接和查询函数3. 编译和运行程序三、注意事项1. 安全性2. 错误处理3. 性能优化4. 兼容性5. 调试和日志记录四、结论Doris（之前称为Palo或Apa…...

编程日记 2024/9/29 10:11:01

DarkLabel 2.4 目标追标注工具介绍

DarkLabel介绍 https://github.com/darkpgmr/DarkLabel 官方地址视频/图像标注工具，很适合用于目标追踪任务 DarkLabel可以在视频和图像中标注物体的边界框，并附上 ID 和name。还可以用于裁剪视频、从视频中采样训练图像以及对图像区域进行马赛克处理…...

编程日记 2024/9/29 10:08:58

uniapp设置从右上角到左下角的三种渐变颜色

推荐学习文档 golang应用级os框架，欢迎stargolang应用级os框架使用案例，欢迎star案例：基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识，这里有免费的golang学习笔…...

编程日记 2024/9/29 10:07:57

Python 解析 html

一、场景分析假设有如下 html 文档： 写一段 python 脚本，解析出里面的数据，包括经度维度。 <div classstorelist><ul><li lng"100.111111" lat"10.111111"><h4>联盟店1</h4><p>…...

编程日记 2024/9/29 10:06:53

“大数据+高职”：VR虚拟仿真实训室的发展前景

随着信息技术的迅猛发展，大数据技术与虚拟现实（VR）的融合正在为高等教育，尤其是高等职业教育（高职）带来革命性的变革。VR虚拟仿真实训室作为这一技术融合的典型应用，正逐步展现其在提升教育质量…...

编程日记 2024/9/29 10:05:51

Pygame中Sprite实现逃亡游戏4

在《Pygame中Sprite实现逃亡游戏3》中实现了玩家跳跃飞火的效果，接下来通过精灵类的碰撞检测来判断飞火是否击中玩家、飞火是否击中飞龙以及飞龙是否抓住玩家。 1 飞火是否击中玩家的判断判断飞火是否击中玩家的代码如图1所示。图1 判断飞火是否击中玩家的代码 …...

编程日记 2024/9/29 10:04:50

sentinel原理源码分析系列(一)-总述

背景微服务是目前java主流开发架构，微服务架构技术栈有，服务注册中心，网关，熔断限流，服务同学，配置中心等组件，其中，熔断限流主要3个功能特性，限流，熔断&…...

编程日记 2024/9/29 10:03:47

创建数据/采集数据+从PI数据到PC+实时UI+To PLC

Get_Data ---------- import csv import os import random from datetime import datetime import logging import time # 配置日志记录 logging.basicConfig(filename=D:/_Study/Case/Great_Data/log.txt, level=logging.INFO, format=%(asctime)s - %(l…...

编程日记 2024/9/29 10:02:45

Linux基础入门 --12 DAY(SHELL脚本编程基础)

shell脚本编程声明：首行shebang机制 #!/bin/bash #!/usr/bin/python #!/usr/bin/perl 变量变量类型变量类型： 内置变量 : 如 PS1 , PATH ,HISTSIZE 用户自定义变量不同变量存放数据不同，决定了以下 1.数据存储方式 2.参与的运算 3.表示…...

编程日记 2024/9/29 10:00:43

关于frp Web界面-----frp Server Dashboard 和 frp Client Admin UI

Web 界面官方文档：https://gofrp.org/zh-cn/docs/features/common/ui/ 目前 frpc 和 frps 分别内置了相应的 Web 界面方便用户使用。客户端 Admin UI 服务端 Dashboard 服务端 Dashboard 服务端 Dashboard 使用户可以通过浏览器查看 frp 的状态以及代理统计信…...

编程日记 2024/9/29 9:59:41

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2025/10/25 16:20:40

微信小程序之bind和catch

这两个呢，都是绑定事件用的，具体使用有些小区别。官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...

编程新知 2025/10/25 16:30:58

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/10/23 12:32:48

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/10/23 12:47:19

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/10/25 9:02:26

day36-多路IO复用

一、基本概念 （服务器多客户端模型） 定义：单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力作用：应用程序通常需要处理来自多条事件流中的事件，比如我现在用的电脑，需要同时处理键盘鼠标…...

编程新知 2025/10/15 23:53:10

区块链技术概述

区块链技术是一种去中心化、分布式账本技术，通过密码学、共识机制和智能合约等核心组件，实现数据不可篡改、透明可追溯的系统。一、核心技术 1. 去中心化特点：数据存储在网络中的多个节点（计算机），而非…...

编程新知 2025/10/25 7:41:33

WEB3全栈开发——面试专业技能点P7前端与链上集成

一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的服务端渲染（SSR）与静态网站生成（SSG） 框架，由 Vercel 开发。它简化了构建生产级 React 应用的过程，并内置了很多特性： ✅ 文件系…...

编程新知 2025/9/30 4:51:15

FOPLP vs CoWoS

以下是 FOPLP（Fan-out panel-level packaging 扇出型面板级封装）与 CoWoS（Chip on Wafer on Substrate）两种先进封装技术的详细对比分析，涵盖技术原理、性能、成本、应用场景及市场趋势等维度： 一、技术原…...

编程新知 2025/10/24 6:08:42