记录--css水滴登录界面
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
前言
今天我们来分享一款非常有趣的登录界面，它使用HTML和CSS制作，具有动态的水波纹效果，让用户在登录时感受到了一股清凉之感。
基本html框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="water.css">
<link rel="stylesheet" href="form.css">
</head> <body>
<div class="main">
<form>
<p>用户名<br />
<input type="text" class="textinput" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" class="textinput" placeholder="请输入密码" />
</p>
<p>
<input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
</p>
<p>
<input type="submit" value="登录" />
</p>
<p class="txt">还没有账户？<a href="#">注册</a></p>
</form>
</div>
</body>
</html>
首先，我们来看HTML代码。这个登录界面包含一个表单，用户需要在表单中输入用户名和密码。我们使用p标签创建输入框，并设置class属性以便后续的CSS样式设置。此外，我们还在表单中添加了一个“记住密码”的复选框和一个登录按钮，同时还有一个注册链接。
表单样式
form{
opacity: 0.8;
text-align: center;
padding: 0px 100px;
border-radius: 10px;
margin: 120px auto;
}
p {
-webkit-text-stroke: 1px #8e87c3;
}
对表单整体进行样式定义，使其位于水滴内部，p标签内文镂空。
.textinput{
height: 40px;
font-size: 15px;
width: 100px;
padding: 0 35px;
border: none;
background: rgba(250, 249, 249, 0.532);
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
border-radius: 50px;
-webkit-text-stroke: 0px;
color: saddlebrown;
outline-style: none;
}
对输入框进行样式定义，取消镂空字体样式，取消轮廓线，设置阴影实现水滴一般效果。
input[type="submit"]{
width: 110px;
height: 40px;
text-align: center;
outline-style: none;
border-style: none;
border-radius: 50px;
background: rgb(31, 209, 218);
-webkit-text-stroke: 0px;
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
我们使用了input[type="submit"] 选择器来选中提交按钮，并设置了按钮的大小、文本对齐方式、圆角和背景等样式，去除了轮廓线。同样采用了阴影来设置按钮，使其具有气泡一般的感觉，并设置背景色。
input[type="submit"]:hover {
background-color: rgb(31, 218, 78);
}
这段代码是用来为按钮添加鼠标悬停效果的。我们使用了input[type="submit"]:hover选择器来选中鼠标悬停在按钮上时的状态，并设置了背景颜色。当用户悬停在按钮上时，按钮的背景颜色会改变，非常引人注目。
a {
text-decoration: none;
color: rgba(236, 20, 20, 0.433);
-webkit-text-stroke: 1px;
}
a:hover {
text-decoration: underline;
}
提交按钮底部注册文字样式，采用镂空字体样式，鼠标移至该元素上方时，添加下划线。
* {
margin: 0;
padding: 0;
}
body {
background: skyblue;
}
这段代码是对所有元素的外边距和内边距进行清零，以便更好地控制元素的位置和大小，设置了整个页面的背景颜色为天蓝色。
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
box-sizing: border-box;
border-radius: 50%;
background: transparent;
box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
animation: move 6s linear infinite;
}
.main::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
background: rgba(254, 254, 254, 0.667);
left: 80px;
top: 80px;
border-radius: 50%;
animation: move2 6s linear infinite;
filter:blur(1px);
}
.main::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
left: 130px;
top: 70px;
border-radius: 50%;
animation: move3 6s linear infinite;
filter:blur(1px);
}
@keyframes move {
50% {
border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
}
75% {
border-radius: 52% 48% 49% 51% / 43% 49% 51% 57% ;
}
25% {
border-radius: 52% 48% 59% 41% / 43% 49% 51% 57% ;
}
}
@keyframes move2 {
25% {
left: 80px;
top: 110px;
}
50% {
left: 50px;
top: 80px;
}
75% {
left: 80px;
top: 120px;
}
}
@keyframes move3 {
25% {
left: 100px;
top: 90px;
}
50% {
left: 110px;
top: 75px;
}
75% {
left: 130px;
top: 100px;
}
}
总代码
HTML部分
<div class="main">
<form>
<p>用户名<br />
<input type="text" class="textinput" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" class="textinput" placeholder="请输入密码" />
</p>
<p>
<input id="remember" type="checkbox" /><label for="remember">记住密码</label>
</p>
<p>
<input type="submit" value="登录" />
</p>
<p class="txt">还没有账户？<a href="#">注册</a></p>
</form>
</div>
CSS部分
* {
margin: 0;
padding: 0;
}
body {
background: skyblue;
}
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
box-sizing: border-box;
border-radius: 50%;
background: transparent;
box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
animation: move 6s linear infinite;
}
.main::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
background: rgba(254, 254, 254, 0.667);
left: 80px;
top: 80px;
border-radius: 50%;
animation: move2 6s linear infinite;
filter:blur(1px);
}
.main::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
left: 130px;
top: 70px;
border-radius: 50%;
animation: move3 6s linear infinite;
filter:blur(1px);
}
@keyframes move {
50% {
border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
}
75% {
border-radius: 52% 48% 49% 51% / 43% 49% 51% 57% ;
}
25% {
border-radius: 52% 48% 59% 41% / 43% 49% 51% 57% ;
}
}
@keyframes move2 {
25% {
left: 80px;
top: 110px;
}
50% {
left: 50px;
top: 80px;
}
75% {
left: 80px;
top: 120px;
}
}
@keyframes move3 {
25% {
left: 100px;
top: 90px;
}
50% {
left: 110px;
top: 75px;
}
75% {
left: 130px;
top: 100px;
}
}
form{
opacity: 0.8;
text-align: center;
padding: 0px 100px;
border-radius: 10px;
margin: 120px auto;
}
p {
-webkit-text-stroke: 1px #8e87c3;
}
.textinput{
height: 40px;
font-size: 15px;
width: 100px;
padding: 0 35px;
border: none;
background: rgba(250, 249, 249, 0.532);
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
border-radius: 50px;
-webkit-text-stroke: 0px;
color: saddlebrown;
outline-style: none;
}
input[type="submit"]{
width: 110px;
height: 40px;
text-align: center;
outline-style: none;
border-style: none;
border-radius: 50px;
background: rgb(31, 209, 218);
-webkit-text-stroke: 0px;
box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
input[type="submit"]:hover {
background-color: rgb(31, 218, 78);
}
a {
text-decoration: none;
color: rgba(236, 20, 20, 0.433);
-webkit-text-stroke: 1px;
}
a:hover {
text-decoration: underline;
}
本文转载于:
https://juejin.cn/post/7225623397144199228
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--css水滴登录界面的更多相关文章
- HTML+CSS系列:登录界面实现
一.效果 二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- html+css实现登录界面
<!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...
- div+css模仿登录界面
我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...
- CSS样式案例(2)-制作一个简单的登录界面
首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- 一个简单的jsp+servlet登录界面的总结
这个登录界面我是用eclipse+tomcat7来实现的(网上比较多都是用myeclipse来做的) 1.首先是关于servlet部署的问题 首先你的servlet类要写在WEB-INF的Class文 ...
- C#学习笔记-Windows窗体基本功能（Login登录界面）
本菜鸟由于实习工作的原因,不得不快速接触C#语言,刚刚好又要做毕业设计,所以就通过自学的方式一举两得地完成这两件事情. 故此文字记录或代码中的各种文件名之类均是以毕业设计为模版记录的,看着不方便之处请 ...
- [IOS NSUserDefaults]的使用：登陆后不再显示登录界面。
之前搜了好多地方都没找到实现“登陆后不再显示登录界面,而默认自动登录”的方法. 待我发现有种存储方式叫NSUserDefaults的时候,立马又感觉新技能get了. 简介: NSUserDefault ...
- EasyUi – 2.布局Layout + 3.登录界面
1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...
- Ubuntu输入密码登陆后又跳回到登录界面
现象:在Ubuntu登陆界面输入密码之后,黑屏一闪并且出现了check battery state之类的文字之后,又跳转到登录界面.原因:主目录下的.Xauthority文件拥有者变成了root,从而 ...
随机推荐
- [Kafka]Kafka学习 -- 初识Kafka
Kafka学习 -- 初识Kafka 参考资料:稀土掘金<图解Kafka之实战指南>https://juejin.cn/book/6844733793220165639 Kafka是一个多 ...
- Linux（Centos7）升级MySQL 5.7到8.0.31
一.下载MySQL安装包 下载地址:https://downloads.mysql.com/archives/community/ 二.备份 mkdir /home/mysqlback mysqldu ...
- 从函数柯里化聊到add(1)(2)(3) add(1, 2)(3)，以及柯里化无限调用
壹 ❀ 引 很久之前看到过的一道面试题,最近复习又遇到了,这里简单做个整理,本题考点主要是函数柯里化,所以在实现前还是简单介绍什么是柯里化. 贰 ❀ 函数柯里化(Currying) 所谓函数柯里化,其 ...
- 像闪电般击碎天空吧——快速轻量化模型之 SDXL-Lightning
SDXL-Lightning 是一个由 ByteDance(字节跳动) 开发的文本到图像的生成模型,其主要贡献在于其高速的生成能力和轻量化的设计. 模型的特点 快速生成:SDXL-Lightning ...
- glob模块(匹配所有符合条件的文件)
函数功能介绍 匹配所有的符合条件的文件,并将其以list的形式返回. 通配符 "*":匹配零个或多个字符 "?":匹配任何单个字符 "[]" ...
- 领略一下swift函数派发机制流程
函数派发 Swift中函数的派发机制有三种:静态派发,函数表派发,消息派发. 静态派发 静态派发是指在运行时不需要查表,直接跳转到方法进行执行.静态派发的性能也是最高的.c语言采用的是直接派发. 函数 ...
- [App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
问题描述 在App Service 中选择了Java Tomcat后,如何查看Azure App Service的Tomcat的配置信息呢? 问题解答 可以通过以下的 3个步骤查看: 第一步:登录 K ...
- 【2024面试刷题】一、Spring Cloud 面试题
1.什么是 Spring Cloud? Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如 服务发现注册.配置中心.智能路 ...
- ui转py文件
ui文件转py文件并且使用 简单做一个笔记,以后忘了回来看看 转换 在QT Designer中创建完ui文件后,回到pycharm中,右键点击ui文件,选择pyuic 完成后获得了和ui文件同名的py ...
- 可视化学习：使用WebGL实现网格背景
前言 作为前端开发人员,我们最关注的就是应用的交互体验,而元素背景是最基础的交互体验之一.一般而言,能够使用代码实现的界面,我们都会尽可能减少图片的使用,这主要是有几方面的原因,第一,是图片会消耗更多 ...