动态水滴页面

2025-07-21 09:54:26

动态水滴页面 HTML+CSS实现动态水滴的登录页面参考素材获取盒子形状通过这个网站可以执行设置@keyframes move 中的属性。效果展示HTML骨架代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

动态水滴页面

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

参考素材

获取盒子形状通过这个网站可以执行设置@keyframes move 中的属性。

效果展示

HTML骨架

代码语言：javascript代码运行次数：0运行复制

<!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="">
    <link rel="stylesheet" href="">
</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渲染

代码语言：javascript代码运行次数：0运行复制

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 5px;

    /* 去除边框 */
    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;
}

代码语言：javascript代码运行次数：0运行复制

* {
    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 0px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.), 15px 15px 0px 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: 10px;
    top: 70px;
    border-radius: 50%;
    animation: move 6s linear infinite;
    filter:blur(1px);
}

/* 设置移动方位 */
@keyframes move {
    50% {
        border-radius: 50% 50% 66% 4% / 26% 62% 8% 74% ;
    }
    75% {
        border-radius: 750% 50% 49% 51% / 26% 62% 8% 74% ;
    }
    25% {
        border-radius: 50% 50% 49% 51% / 52% 62% 8% 48% ;
    }
}

@keyframes move2 {
    50% {
        left: 60px;
        top: 80px;
    }
    75% {
        left: 80px;
        top: 120px;
    }
    25% {
        left: 50px;
        top: 120px;
    }
}

@keyframes move {
    50% {
        left: 110px;
        top: 75px;
    }
    75% {
        left: 10px;
        top: 100px;
    }
    25% {
        left: 100px;
        top: 90px;
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2022-12-15，如有侵权请联系 cloudcommunity@tencent 删除登录动画网站渲染border

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1150468.html

推荐阅读

留言与评论（共有 20 条评论）

本站网友永辉超市供应商服务系统	3分钟前发表

本站网友长沙眼科医院	22分钟前发表
120px; } } @keyframes move { 50% { left
本站网友一吨水是多少立方米	24分钟前发表
absolute; /* 设置盒子放在中间的位置 */ left
本站网友医疗器械行业	10分钟前发表
15px 15px 0px rgba(0
本站网友邵武酒店	2分钟前发表
saddlebrown; } /* 筛选input标签中 type为"submit"的进行渲染/ input[type="submit"]{ / 设置宽高 */ width
本站网友优先股概念	11分钟前发表
inset 10px 20px 0px rgba(0
本站网友香香人体	25分钟前发表
0.)
本站网友测试机器人2无敌版	15分钟前发表
原始发表：2022-12-15
本站网友模拟炒股软件哪个好	2分钟前发表
inset 0px 2px 5px #aaaaaa; /* 给文本框加上圆角边框 */ border-radius
本站网友胡萝卜的功效	9分钟前发表
#C0C6CB; } a { /* 去除下划线 */ text-decoration
本站网友果导片	19分钟前发表
如有侵权请联系 cloudcommunity@tencent 删除前往查看登录动画网站渲染border
本站网友欧浪网	24分钟前发表
0.5); left
本站网友北京酒吧	21分钟前发表
40px; background
本站网友北京胃肠病医院	7分钟前发表
10px 10px 20px rgba(0
本站网友郑大医学院	21分钟前发表
255
本站网友 itunes备份的文件在哪里	8分钟前发表
120px; } } @keyframes move { 50% { left
本站网友广发华福同花顺下载	30分钟前发表
0
本站网友华创	29分钟前发表
原始发表：2022-12-15
本站网友武汉汉阳租房	14分钟前发表
50%; /* 背景透明 */ background

动态水滴页面