css实现背景不断变色的透明磨砂登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:css实现背景不断变色的透明磨砂登录表单页面代码
代码标签: css 背景 不断 变色 透明 磨砂 登录 表单 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } section { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: url('//repo.bfw.wiki/bfwrepo/image/62e20e402b38d.png') no-repeat; background-size: cover; background-position: center; animation: animateBg 5s linear infinite; } @keyframes animateBg { 100% { filter: hue-rotate(360deg) } } .login-box { position: relative; width: 600px; height: 450px; background: transparent; border: 2px solid rgba(119, 92, 92, 0.5); border-radius: 50px; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(15px); } h2 { font-size: 2.5rem; color: #fff; text-align: center; } .input-box { position: relative; width: 310px; margin: 30px 0; border-bottom: 2px solid #fff; } .input-box label { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); font-size: 1rem; color: #fff; pointer-events: none; transition: .5s; } .input-box input:focus~label, .input-box input:valid~label { top: -5px; } .input-box input { width: 100%; height: 50px; background: transparent; border: none; outline: none; font-size: 1rem; color: #fff; padding: 0 35px 0 5px; } .input-box .icon { position: absolute; right: 8px; color: #fff; font-size: 1.2rem; line-height: 57px; } .remember-forgot { margin: -15px 0 15px; font-size: .9em; color: #fff; display: flex; justify-content: space-between; } .remember-forgot label input { margin-right: 3px ; } .remember-forgot a { color: #fff; text-decoration: none;} .remember-forgot a:hover { text-decoration: underline; } button { width: 100%; height: 40px; background: #fff;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0