文章目录
- 一、效果演示
- 二、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%;
}
为按钮添加悬停效果和装饰性伪元素。
