日期：
来源：web前端开发收集编辑：
文 | 杨小爱
写在前面
注册登录的组件，在前面也分享过一些，今天我们再来看一个注册登录的UI样式效果，截图如下：
为了能方便看到鼠标效果，我录了一个GIF的动图，如下：
<!DOCTYPE html><html><head><title>【每日一练】107—CSS实现一款水滴注册登录页面的效果</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="container"><div class="drop"><div class="content"><h2>登录</h2><form><div class="inputBox"><input type="text" placeholder="用户名"></div><div class="inputBox"><input type="password" placeholder="密码"></div><div class="inputBox"><input type="submit" value="登录"></div></form></div></div><a href="http://www.webqdkf.com" class="btns" target="_blank">忘记密码</a><a href="http://www.webqdkf.com" class="btns signup" target="_blank">注册</a></div></body></html>
*{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: #eff0f4;}.container{position: relative;left: -80px;display: flex;justify-content: center;align-items: center;}.container .drop{position: relative;width: 350px;height: 350px;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);transition: 0.5s;display: flex;justify-content: center;align-items: center;border-radius: 50%;}.container .drop:hover{border-radius: 10%;}.container .drop::before{content: '';position: absolute;top: 50px;left: 85px;width: 35px;height: 35px;border-radius: 50%;background: #fff;opacity: 0.9;}.container .drop::after{content: '';position: absolute;top: 90px;left: 110px;width: 15px;height: 15px;border-radius: 50%;background: #fff;opacity: 0.9;}.container .drop .content{position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;padding: 40px;gap: 15px;}.container .drop .content h2{position: relative;color: #333;font-size: 1.5em;}.container .drop .content form{display: flex;flex-direction: column;gap: 20px;justify-content: center;align-items: center;}.container .drop .content form .inputBox{position: relative;width: 225px;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);border-radius: 25px;}.container .drop .content form .inputBox::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;}.container .drop .content form .inputBox input{border: none;outline: none;background: transparent;width: 100%;font-size: 1em;padding: 10px 15px;}.container .drop .content form .inputBox input[type="submit"]{color: #fff;text-transform: uppercase;font-size: 1em;cursor: pointer;letter-spacing: 0.1em;font-weight: 500;}.container .drop .content form .inputBox:last-child{width: 120px;background: #00a6bc;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;}.container .drop .content form .inputBox:last-child:hover{width: 150px;}.btns{position: absolute;right: -120px;bottom: 0;width: 120px;height: 120px;background: #00a6bc;display: flex;justify-content: center;align-items: center;cursor: pointer;text-decoration: none;color: #fff;line-height: 1.2em;letter-spacing: 0.1em;font-size: 0.8em;transition: 0.25s;text-align: center;box-shadow: inset 10px 10px 10px rgba(0,166,188,0.05),15px 25px 10px rgba(0,166,188,0.1),15px 20px 20px rgba(0,166,188,0.1),inset -10px -10px 15px rgba(0,166,188,0.5);border-radius: 50%;}.btns::before{content: '';position: absolute;top: 15px;left: 30px;width: 20px;height: 20px;border-radius: 50%;background: #fff;opacity: 0.45;}.btns.signup{bottom: 150px;right: -120px;width: 80px;height: 80px;border-radius:50%;background: #00a6bc;box-shadow: inset 10px 10px 10px rgba(0,166,188,0.05),15px 25px 10px rgba(0,166,188,0.1),15px 20px 20px rgba(0,166,188,0.1),inset -10px -10px 15px rgba(0,166,188,0.5);}.btns.signup::before{left: 20px;width: 15px;height: 15px;}.btns:hover{border-radius: 10%;}
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐阅读
学习更多技能
请点击下方公众号