动态水滴页面

￡神魔★判官ぃ 2024-03-31 17:35 74阅读 0赞

## HTML+CSS实现动态水滴的登录页面 ##

### 参考素材 ###

[获取盒子形状][Link 1]通过这个网站可以执行设置`@keyframes move`中的属性。  
![在这里插入图片描述][56ef223e3ab1487aab4cbbba412c5a14.png]

### 效果展示 ###

![在这里插入图片描述][28b7ce4231c544848dea2f2514dd9018.png]

### 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;
        }
    }

[Link 1]: https://9elements.github.io/fancy-border-radius/#52.50.43.51--.
[56ef223e3ab1487aab4cbbba412c5a14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c28913f3ffc749dfb589dfba0c2d5916.png
[28b7ce4231c544848dea2f2514dd9018.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/ad2a36b4566b498fb4c4d50fb3cbd5e1.png