css实现磨砂方块背景登录表单页面效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现磨砂方块背景登录表单页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> @charset "utf-8"; body { background: linear-gradient(45deg, #FC466B, #3F5EFB); height: 100vh; font-family: 'Montserrat', sans-serif; } .container { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; } form { background: rgba(255, 255, 255, 0.3); padding: 3em; height: 320px; border-radius: 20px; border-left: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2); text-align: center; position: relative; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } form p { font-weight: 500; color: #fff; opacity: 0.7; font-size: 1.4rem; margin-top: 0; margin-bottom: 60px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } form a { text-decoration: none; color: #ddd; font-size: 12px; } form a:hover { text-shadow: 2px 2px 6px #00000040; } form a:active { text-shadow: none; } form input { background: transparent; width: 200px; padding: 1em; margin-bottom: 2em; border: none; border-left: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5000px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2); color: #fff; font-family: Montserrat, sans-serif; font-weight: 500; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } form input:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2); } form input[type="email"]:focus, form input[type="password"]:focus { background: rgba(255, 255, 255, 0.1); box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2); } form input[type="button"] { margin-top: 10px; width: 150px; font-size: 1rem; } form input[type="button"]:hover { cursor: pointer; } form input[type="button"]:active { background: rgba(255, 255, 255, 0.2); } form:hover { margin: 4px; } ::-webkit-input-placeholder { font-family: Montserrat, sans-serif; font-weight: 400; color: #fff; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0