HTML+CSS实现动态水滴的登录页面
参考素材
获取盒子形状通过这个网站可以执行设置@keyframes move 中的属性。
效果展示
HTML骨架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="water.css"> <link rel="stylesheet" href="form.css"> </head> <body> <div class="main"> <form> <p>用户名<br /> <input type="text" class="textinput" placeholder="请输入用户名" /> </p> <p>密码<br /> <input type="password" class="textinput" placeholder="请输入密码" /> </p> <p> <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label> </p> <p> <input type="submit" value="登录" /> </p> <p class="smtxt">还没有账户？<a href="注册界面.html">注册</a></a> </form> </div> </body> </html>
CSS渲染
form.css
form{ /* 设置透明度 */ opacity: 80%; text-align: center; /* 再设置内边距 使得内容更偏向于中央位置 */ /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */ /* 但是会撑大盒子 */ padding: 0px 100px; /* 设置文本文字的大小 */ font-size: 18px; /* 添加圆角边框 */ border-radius: 10px; /* 增加外边距 */ /* 上下120px 然后左右居中 */ margin: 120px auto; } .textinput{ /* 设置宽高 */ height: 40px; width: 100px; /* 设置内边距 */ padding: 0 35px; /* 去除边框 */ border: none; /* 设置背景颜色 */ background: #F8F9F9; /* 设置字体大小 */ font-size: 15px; /* 给文本框加上阴影 */ box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa; /* 给文本框加上圆角边框 */ border-radius: 5px; /* 给文本框中输入文字加上颜色 */ color: saddlebrown; } /* 筛选input标签中 type为"submit"的 进行渲染*/ input[type="submit"]{ /* 设置宽高 */ width: 110px; height: 40px; /* 内部文本居中 */ text-align: center; /* 圆角边框 */ border-radius: 5px; /* 设置字体 */ font:16px "黑体"; /* 设置背景颜色 */ background-color: #C0C6CB; } a { /* 去除下划线 */ text-decoration: none; } a:hover { /* 悬空的时候有被选中的样子 出现下划线*/ text-decoration: underline; }
water.css
* { margin: 0; padding: 0; } body { background: skyblue; } .main { /* 设置为绝对定位 */ position: absolute; /* 设置盒子放在中间的位置 */ left: 50%; top: 50%; /* 设置动态效果 */ transform: translate(-50%, -50%); /* 设置盒子大小 */ width: 400px; height: 400px; /* 把边框算入盒子大小 */ box-sizing: border-box; border-radius: 50%; /* 背景透明 */ background: transparent; /* 设置阴影边框 */ box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8); /* 设置动画效果 */ animation: move 6s linear infinite; } .main::after { position: absolute; content: ""; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.5); left: 80px; top: 80px; border-radius: 50%; animation: move2 6s linear infinite; filter:blur(1px); } .main::before { position: absolute; content: ""; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.5); left: 130px; top: 70px; border-radius: 50%; animation: move3 6s linear infinite; filter:blur(1px); } /* 设置移动方位 */ @keyframes move { 50% { border-radius: 50% 50% 66% 34% / 26% 62% 38% 74% ; } 75% { border-radius: 750% 50% 49% 51% / 26% 62% 38% 74% ; } 25% { border-radius: 50% 50% 49% 51% / 52% 62% 38% 48% ; } } @keyframes move2 { 50% { left: 60px; top: 80px; } 75% { left: 80px; top: 120px; } 25% { left: 50px; top: 120px; } } @keyframes move3 { 50% { left: 110px; top: 75px; } 75% { left: 130px; top: 100px; } 25% { left: 100px; top: 90px; } }
