css实现透明水滴登录注册表单页面代码
代码语言:html
所属分类:布局界面
代码描述:css实现透明水滴登录注册表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { 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: 52% 48% 33% 67% / 30% 45% 55% 62%; } .container .drop:hover { border-radius: 50%; } .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); } .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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0