其他
【每日一练】107—一款好玩的注册登录UI效果
文 | 杨小爱
写在前面
注册登录的组件，在前面也分享过一些，今天我们再来看一个注册登录的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%;}以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐阅读
学习更多技能
请点击下方公众号