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

css-水滴登录页

news 2025/10/18 11:27:26

效果图：
请添加图片描述

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link type="text/css" rel="stylesheet" href="login.css" /></head><body><div class="box"><div class="content"><h2>登录</h2><div><input type="text" placeholder="请输入用户名"></div><div><input type="text" placeholder="请输入用户密码"></div><div><input type="submit" value="登录"></div></div><a href="#" class="btns">忘记密码</a><a href="#" class="btns register">注册</a><strong></strong></div></body>
</html>

css

* {margin: 0;padding: 0px;box-sizing: border-box;/* box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。*/
}body {height: 100vh;background: #eff0f4;
}.box {position: relative;display: flex;justify-content: space-between;margin: 230px 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:20px 20px 20px rgba(0, 0, 0, .05) inset,25px 35px 20px rgba(0, 0, 0, .05),25px 30px 30px rgba(0, 0, 0, .05),-20px -20px 25px rgba(255, 255, 255, .9) inset;
}.box .content {transition: .5s;border-radius: 52% 48% 33% 67% /38% 45% 55% 62%;}.box .content:hover{border-radius: 50%
}.box .content::before{content: '';position: absolute;top: 50px;left: 85px;width: 35px;height: 35px;border-radius: 50%;background-color: #fff;opacity: 0.9;
}.box .content::after{content: '';position: absolute;top: 90px;left: 110px;width: 15px;height: 15px;border-radius: 50%;background-color: #fff;opacity: 0.9;
}.box .content div{position: relative;width: 225px;border-radius: 25px;box-shadow: inset 20px 5px 10px rgba(0,0,0,.1),inset -2px -5px 10px rgba(255,255,255,1),15px 15px 10px rgba(0,0,0,.05),15px 10px 15px rgba(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;
}.box .content div:last-child{width: 120px;background-color: #ff0f5b;transition: .5s;box-shadow:inset 2px 5px 10px rgba(0,0,0,.1),15px 15px 10px rgba(0,0,0,.05),15px 10px 15px rgba(0,0,0,.025);
}.box .content div:last-child:hover{width: 150px;
}.box .content div::before{content: '';position: absolute;top:8px;left: 50%;transform: translateX(-50%);width: 65px;height: 5px;background: rgba(255, 255, 255, .5);border-radius: 5px;
}.btns{position: absolute;right: 0px;bottom: 0px;width: 120px;height: 120px;background: #c61dff;display: flex;justify-content: center;align-items: center;cursor: pointer;text-decoration: none;color: #fff;font-size: 14px;border-radius:  46% 56% 65% 35% / 57% 58% 42% 43%;box-shadow:inset 10px 10px 10px rgba(190,1,254,.05),15px 25px 10px rgba(190,1,254,.1),15px 20px 20px rgba(190,1,254,.1),inset -10px -10px 15px rgba(255,255,255,.5);
}.btns::before{content: '';position: absolute;top: 15px;left: 30px;width: 20px;height: 20px;border-radius: 50%;background-color: #fff;opacity: 0.45;
}.btns{transition: 0.25s;
}.btns:hover{border-radius: 50%;
}.register{right: 0px;bottom: 150px;width: 80px;height: 80px;background: #01b4ff;display: flex;justify-content: center;align-items: center;cursor: pointer;text-decoration: none;color: #fff;font-size: 14px;border-radius:  49% 51% 52% 48% / 63% 59% 41% 37%;box-shadow:inset 10px 10px 10px rgba(1,180,255,.05),15px 25px 10px rgba(1,180,255,.1),15px 20px 20px rgba(1,180,255,.1),inset -10px -10px 15px rgba(255,255,255,.5);
}.register::before{left: 20px;width: 15px;height: 15px;
}

相关文章：

css-水滴登录页

效果图&#xff1a; html <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><link type"text/css" rel"stylesheet" href"login.css" /></head><body><…...

编程日记 2023/10/20 1:17:41

Spark Streaming 整合 Flume

本文代码链接： https://download.csdn.net/download/shangjg03/88442192 1.简介 Apache Flume 是一个分布式，高可用的数据收集系统，可以从不同的数据源收集数据，经过聚合后发送到分布式计算框架或者存储系统中。Spark Straming 提供了以下两种方式用于 Flume 的整合。 2.推…...

编程日记 2023/10/20 1:16:39

如何写出优雅的业务代码

接口统一响应对象返回 BaseResponse通用响应对象 package com.leesin.project.common;存放在common包下 有三个主要的字段&#xff1a; code&#xff1a;一个整数&#xff0c;通常用于表示响应的状态码&#xff0c;例如200表示成功&#xff0c;404表示未找到资源等。data&a…...

编程日记 2023/10/20 1:15:38

办鹿uniapp小程序（一）

一、项目初始化 1. appid 》 公司给你 wxc82730a0fc15e28a 2. 开发者身份 》 公司给你添加 小程序官网&#xff1a;小程序 管理》成员管理》项目成员 1、 uniapp ui组件 &#xff08;uView&#xff09; 如果采用npm安装方式在 小程序端不生效 1.1 采用插件的形式安装&#xf…...

编程日记 2023/10/20 1:14:35

#力扣：1684. 统计一致字符串的数目@FDDLC

1684. 统计一致字符串的数目 - 力扣&#xff08;LeetCode&#xff09; 一、Java class Solution {public int countConsistentStrings(String allowed, String[] words) {boolean[] isAllowed new boolean[26];for(int i 0; i < allowed.length(); i) isAllowed[allowed…...

编程日记 2023/10/20 1:12:30

谈谈 Redis 主从复制模式

谈谈 Redis 主从复制模式 第一次主从节点同步是全量复制 接下来&#xff0c;我在具体介绍每一个阶段都做了什么。 第一阶段&#xff1a;建立链接、协商同步 执行了 replicaof 命令后&#xff0c;从服务器就会给主服务器发送 psync 命令&#xff0c;表示要进行数据同步。 psync…...

编程日记 2023/10/20 1:11:29

tika解压遇到压缩炸弹如何继续解压

1.问题 项目中要对10层压缩的zip、7z等文件用tika解压遇到错误&#xff1a;tika zip bomb detected 也就是说tika认为这是个压缩炸弹。 “压缩炸弹”是一个压缩包文件的木马程序&#xff0c;通常只有几百KB&#xff0c;解压后会变成上百MB或者上GB庞然大物。把你本地磁盘占满…...

编程日记 2023/10/20 1:10:28

【OJ比赛日历】快周末了，不来一场比赛吗？ #10.21-10.27 #11场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2023-10-21&#xff08;周六&#xff09; #2场比赛2023-10-22…...

编程日记 2023/10/20 1:09:26

如何远程通过内网穿透实现微信公众号在本地的完整调试

文章目录 前言1. 配置本地服务器2. 内网穿透2.1 下载安装cpolar内网穿透2.2 创建隧道 3. 测试公网访问4. 固定域名4.1 保留一个二级子域名4.2 配置二级子域名 5. 使用固定二级子域名进行微信开发 前言 在微信公众号开发中&#xff0c;微信要求开发者需要拥有自己的服务器资源来…...

编程日记 2023/10/20 1:08:25

【LeetCode刷题（数据结构与算法）】：合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的 **思路&#xff1a;定义一个头尾指针置为NULL while循环依次比较两个链表的值的大小 遍历链表 比较完数值大小过后连接到tail的尾部 然后各自的链表的节点的next指针指向下一…...

编程日记 2023/10/20 1:07:24

spark DStream从不同数据源采集数据（RDD 队列、文件、diy 采集器、kafka）（scala 编程）

目录 1. RDD队列 2 textFileStream 3 DIY采集器 4 kafka数据源【重点】 1. RDD队列 a、使用场景&#xff1a;测试 b、实现方式: 通过ssc.queueStream(queueOfRDDs)创建DStream&#xff0c;每一个推送这个队列的RDD&#xff0c;都会作为一个DStream处理 val sparkco…...

编程日记 2023/10/20 1:06:22

【三：Mock服务的使用】

目录 1、工具包2、mock的demo1、get请求2、post请求3、带cookies的请求4、带请求头的请求5、请求重定向 1、工具包 1、&#xff1a;服务包的下载 moco-runner-0.11.0-standalone.jar 下载 2、&#xff1a;运行命令java -jar ./moco-runner-0.11.0-standalone.jar http -p 888…...

编程日记 2023/10/20 1:05:22

驱动：驱动相关概念，内核模块编程，内核消息打印printk函数的使用

一、驱动相关概念 1.操作系统的功能 向下管理硬件&#xff0c;向上提供接口 操作系统向上提供的接口类型&#xff1a; 内存管理&#xff1a;内存申请&#xff08;malloc&#xff09; 内存释放&#xff08;free&#xff09;等 文件管理&#xff1a; 通过文件系统格式对文件ext2…...

编程日记 2023/10/20 1:04:20

【Qt控件之QListWidget】介绍及使用，利用QListWidget、QToolButton、和布局控件实现抽屉式组合控件

概述 QListWidget类提供了基于项目的列表小部件。 QListWidget是一个方便的类&#xff0c;类似于QListView提供的列表视图&#xff0c;但使用经典的基于项目的接口来添加和删除项目。QListWidget使用内部模型来管理列表中的每个QListWidgetItem。 对于更灵活的列表视图小部件…...

编程日记 2023/10/20 1:03:19

【Java基础面试二十四】、String类有哪些方法？

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;String类有哪些方法&…...

编程日记 2023/10/20 1:02:18

[DRAFT] LLVM ThinLTO原理分析

我们在《论文阅读&#xff1a;ThinLTO: Scalable and Incremental LTO》中介绍了ThinLTO论文的主要思想&#xff0c;这里我们介绍下LLVM ThinLTO是如何实现的。本文主要分为如下几个部分&#xff1a; LLVM ThinLTO Object 含有哪些内容&#xff1f;LLVM ThinLTO 是如何做优化的…...

编程日记 2023/10/20 1:01:17

使用Gitlab构建简单流水线CI/CD

什么是Gitlab Gitlab实质上是一套DevOps工具 目前看起来&#xff0c;Gitlab属于是内嵌了一套CI/CD的框架&#xff0c;并且可以提供软件开发中的版本管理、项目管理等等其他功能。 这里需要辨别一下Gitlab和Github Gitee的区别。 GIthub大家都很熟悉了&#xff0c;一般大家都会…...

编程日记 2023/10/20 1:00:15

【AIGC核心技术剖析】用于高效 3D 内容创建生成（从单视图图像生成高质量的纹理网格）

3D 内容创建的最新进展主要利用通过分数蒸馏抽样 &#xff08;SDS&#xff09; 生成的基于优化的 3D 生成。尽管已经显示出有希望的结果&#xff0c;但这些方法通常存在每个样本优化缓慢的问题&#xff0c;限制了它们的实际应用。在本文中&#xff0c;我们提出了DreamGaussian&…...

编程日记 2023/10/20 0:59:10

nginx平滑升级添加echo模块、localtion配置、rewrite配置

nginx平滑升级添加echo模块、location配置、rewrite配置 文章目录 nginx平滑升级添加echo模块、location配置、rewrite配置1.环境说明&#xff1a;2.nginx平滑升级原理&#xff1a;3.平滑升级nginx&#xff0c;并添加echo模块3.1.查看当前nginx版本以及老版本编译参数信息3.2.下…...

编程日记 2023/10/20 0:57:07

系统架构师备考倒计时19天(每日知识点)

软件架构评估&#xff08;ATAM&#xff09; 在SAAM的基础上发展起来的&#xff0c;主要针对性能、实用性、安全性和可修改性&#xff0c;在系统开发之前&#xff0c;对这些质量属性进行评价和折中。ATAM方法的主要活动领域包括&#xff1a; 第一阶段 场景和需求收集 收集场景…...

编程日记 2023/10/20 0:56:05

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/9/21 2:23:14

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/10/11 22:38:21

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/10/8 22:40:16

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/10/16 13:28:34

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/10/15 4:19:54

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/8/5 10:17:15

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/10/17 21:35:34

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2025/9/28 3:58:08