div+css实现拟态中性化登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现拟态中性化登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } .container { background: linear-gradient(to bottom, #f4f4f4, #f1f1f1); height: 100vh; display: grid; font-family: "poppins", Arial, Helvetica, sans-serif; place-items: center; } a { text-decoration: none; color: #000; } .card { display: flex; flex-direction: column; align-items: center; background: #f4f4f4; width: 100%; max-width: 400px; padding: 2em; border-radius: 20px; box-shadow: -40px -40px 80px rgb(255, 255, 255), 40px 40px 80px rgba(0, 0, 0, 0.25); } .card-title { font-size: 40px; color: #565656; align-items: center; } .card-subtitle { color: #565656; } .card-form { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; margin: 1.5rem 0 1rem 0; } .card-input-container { position: relative; margin: 0.5rem 0 2rem; width: 100%; } .card-form label { color: #b6b6b6; } .card-input-container input::placeholder { color: #b6b6b6; } .card-input-container input, .card-button { width: 100%; border: none; outline: none; border-radius: 10px; font-family: "poppins", Arial, Helvetica, sans-serif; } .card-input-container input { padding: 1em 2em 1em 4em; font-size: 14px; color: #b6b6b6; background: #f4f4f4; box-shadow: -10px -10px 20px rgb(255, 255, 255), 10px 10px 20px rgba(0, 0, 0, 0.1); } .card-input-container input:focus { box-shadow: inset -5px -5px 10px rgb(255, 255, 255), inset 5px 5px 10px rgba(0, 0, 0, 0.1); } .card-button { background: #565656; padding: 1em; color: #f4f4f4; cursor: pointer; box-shadow: -10px -10px 20px rgb(255, 255, 255), 10px 10px 20px rgba(0, 0, 0, 0.4); margin-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0