记录--css水滴登录界面

这篇具有很好参考价值的文章主要介绍了记录--css水滴登录界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--css水滴登录界面

前言

今天我们来分享一款非常有趣的登录界面,它使用HTML和CSS制作,具有动态的水波纹效果,让用户在登录时感受到了一股清凉之感。

基本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="txt">还没有账户?<a href="#">注册</a></p>
        </form>
    </div>
</body>
</html>

首先,我们来看HTML代码。这个登录界面包含一个表单,用户需要在表单中输入用户名和密码。我们使用p标签创建输入框,并设置class属性以便后续的CSS样式设置。此外,我们还在表单中添加了一个“记住密码”的复选框和一个登录按钮,同时还有一个注册链接。

表单样式

form{            
    opacity: 0.8;
    text-align: center;
    padding: 0px 100px;
    border-radius: 10px;
    margin: 120px auto;
}

p {
  -webkit-text-stroke: 1px #8e87c3;
}

对表单整体进行样式定义,使其位于水滴内部,p标签内文镂空。

.textinput{
    height: 40px;
    font-size: 15px;
    width: 100px;
    padding: 0 35px;
    border: none;
    background: rgba(250, 249, 249, 0.532);
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
    border-radius: 50px;
    -webkit-text-stroke: 0px;
    color: saddlebrown;
    outline-style: none;
}

对输入框进行样式定义,取消镂空字体样式,取消轮廓线,设置阴影实现水滴一般效果。

input[type="submit"]{
    width: 110px;
    height: 40px;
    text-align: center;
    outline-style: none;
    border-style: none;
    border-radius: 50px;
    background: rgb(31, 209, 218);
    -webkit-text-stroke: 0px;
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}

我们使用了input[type="submit"] 选择器来选中提交按钮,并设置了按钮的大小、文本对齐方式、圆角和背景等样式,去除了轮廓线。同样采用了阴影来设置按钮,使其具有气泡一般的感觉,并设置背景色。

input[type="submit"]:hover {
    background-color: rgb(31, 218, 78);
}

这段代码是用来为按钮添加鼠标悬停效果的。我们使用了input[type="submit"]:hover选择器来选中鼠标悬停在按钮上时的状态,并设置了背景颜色。当用户悬停在按钮上时,按钮的背景颜色会改变,非常引人注目。

a {
    text-decoration: none;
    color: rgba(236, 20, 20, 0.433);
    -webkit-text-stroke: 1px;
}

a:hover {
    text-decoration: underline;
}

提交按钮底部注册文字样式,采用镂空字体样式,鼠标移至该元素上方时,添加下划线。

* {
    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 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
    animation: move 6s linear infinite;
}
这段代码采用绝对定位,以便更好地控制它的位置。left: 50%; top: 50%; 将元素的左上角定位在页面的中心位置。通过transform属性将元素向左上角移动50%,以便让元素的中心位置与页面中心位置重合。设置元素的宽度和高度为400像素。background: transparent; 将元素的背景设置为透明色。box-shadow: inset 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873); 设置元素的阴影效果,包括内阴影和外阴影。animation: move 6s linear infinite; 为元素添加动画效果,其中move 是动画名称,6s是动画时长,linear是动画速度曲线,infinite是动画循环次数。
.main::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: rgba(254, 254, 254, 0.667);
    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);
}
这段代码是对两个小球进行样式定义,将伪元素的定位方式设置为绝对定位,以便更好地控制它的位置,设置伪元素的宽度和高度一个为20px,一个为40px。设置伪元素的背景颜色为半透明白色。left,top 设置伪元素的左上角定位在主体元素的中心位置,设置伪元素的边框半径为50%,以便将其设置为圆形。animation: move2 6slinear infinite; 为伪元素添加动画效果,其中 move2 是动画名称,6s 是动画时长,linear 是动画速度曲线,infinite 是动画循环次数,另一个伪元素同理。 接下来是动画定义:
@keyframes move {
    50% {
        border-radius: 42% 58% 49% 51% / 52% 36% 64% 48% ;
    }
    75% {
        border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;
    }
    25% {
        border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;
    }
}

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

@keyframes move3 {
    25% {
        left: 100px;
        top: 90px;
    }
    50% {
        left: 110px;
        top: 75px;
    }
    75% {
        left: 130px;
        top: 100px;
    }
}
这段代码定义了三个不同的动画,分别是move、move2和move3。move动画,它控制了元素的边框半径在不同时间点的变化。在这个动画中,元素的边框半径分别在25%、50%和75%的时间点进行了变化。move2move3动画,控制了一个伪元素的位置在不同时间点的变化。在这个动画中,伪元素的位置分别在25%、50%和75%的时间点进行了变化。

总代码

HTML部分

<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="remember">记住密码</label>
            </p>
            <p>
                <input type="submit" value="登录" />
            </p>
            <p class="txt">还没有账户?<a href="#">注册</a></p>
        </form>
    </div>

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 15px 10px 40px rgba(158, 158, 158, 0.303), 10px 10px 20px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -10px -10px 20px rgba(233, 229, 229, 0.873);
    animation: move 6s linear infinite;
}

.main::after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: rgba(254, 254, 254, 0.667);
    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: 42% 58% 49% 51% / 52% 36% 64% 48% ;
    }
    75% {
        border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%  ;
    }
    25% {
        border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%  ;
    }
}

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

@keyframes move3 {
    25% {
        left: 100px;
        top: 90px;
    }
    50% {
        left: 110px;
        top: 75px;
    }
    75% {
        left: 130px;
        top: 100px;
    }
}
form{            
    opacity: 0.8;
    text-align: center;
    padding: 0px 100px;
    border-radius: 10px;
    margin: 120px auto;
}

p {
  -webkit-text-stroke: 1px #8e87c3;
}

.textinput{
    height: 40px;
    font-size: 15px;
    width: 100px;
    padding: 0 35px;
    border: none;
    background: rgba(250, 249, 249, 0.532);
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
    border-radius: 50px;
    -webkit-text-stroke: 0px;
    color: saddlebrown;
    outline-style: none;
}

input[type="submit"]{
    width: 110px;
    height: 40px;
    text-align: center;
    outline-style: none;
    border-style: none;
    border-radius: 50px;
    background: rgb(31, 209, 218);
    -webkit-text-stroke: 0px;
    box-shadow: inset 4px 4px 10px rgba(160, 162, 158, 0.814), 4px 4px 10px rgba(117, 117, 117, 0.3), 15px 15px 30px rgba(72, 70, 70, 0.193), inset -2px -2px 10px rgba(255, 254, 254, 0.873);
}
input[type="submit"]:hover {
    background-color: rgb(31, 218, 78);
}

a {
    text-decoration: none;
    color: rgba(236, 20, 20, 0.433);
    -webkit-text-stroke: 1px;
}

a:hover {
    text-decoration: underline;
}

  

本文转载于:

https://juejin.cn/post/7225623397144199228

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--css水滴登录界面文章来源地址https://www.toymoban.com/news/detail-445764.html

到了这里,关于记录--css水滴登录界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 分享一个有意思的文字飞入动画(模仿水滴融合)

    先上效果图: 代码如下:

    2024年02月01日
    浏览(42)
  • HTML+CSS前端 简易用户登录界面

    Day1 刚学了一些html和css的简单语法,尝试写一个非常简易的静态用户登录界面。   login_simple.html login_simple.css 这里需要把 background.jpg 替换成自己的背景图。 效果展示 最后的效果就是这样的啦

    2024年02月14日
    浏览(46)
  • 分享两个有意思的登录界面

    1.带有浮动占位符和灯光按钮的登录界面 先上效果: 代码如下: 2.跳跃的登录字符登陆界面 先上效果: 代码如下:

    2023年04月25日
    浏览(40)
  • 在登录界面中设置登录框、多选项和按钮(HTML和CSS)

      登录框(Input框)的样式: 这样设置后,登录框的宽度为200px,高度为30px,具有1px宽的边框,边框颜色为#ccc,圆角为5px,内边距为5px,下方留有10px的外边距。  多选项的样式(如复选框和单选框): 这样设置后,复选框和单选框之间会有5px的外边距,同时复选框和单选框

    2024年02月14日
    浏览(47)
  • 【HTML+CSS+JS】模仿QQ登录界面

    学了HTML、CSS和JS有了一个月了,JS还未学完,偷懒写一个小项目,用了一个下午,顺便巩固一下所学知识。(内容比较简陋,适合新手) 源代码:https://github.com/yeziyuhai/QQ-login-interface 左边是我的,右边是官方的。没有设计稿和素材,只能自己找,所以是无法做到一模一样的,

    2024年02月06日
    浏览(84)
  • 前端登录界面网站设计模板--HTML+CSS

    💖效果展示 💖HTML代码展示

    2024年02月04日
    浏览(56)
  • HTML+CSS 改进前端简易响应式登录界面

    day5 改进上次的项目 HTML+CSS前端 动态响应用户登录界面_一只名叫Me的猫的博客-CSDN博客 在vscode中,空白html文件打入一个感叹号,可以自动创建html模板,避免手搓(悲)。  上次就是因为手搓导致漏了utf-8编码。模板是这个样子的。 块级元素在页面上以块的形式显示,自动占

    2024年02月14日
    浏览(45)
  • HTML和CSS配合制作一个简单的登录界面

    这是一个CSS样式表,用于为网页中的HTML元素设置样式。接下来我会逐句解释每个选择器和样式的作用。 *{ box-sizing: border-box; } :这行代码将所有HTML元素的盒模型设置为 border-box ,使元素的宽高包括内容、内边距和边框,而不仅仅是内容。 body{ font-family: Arial, Helvetica, sans-ser

    2024年02月12日
    浏览(43)
  • 记录--基于css3写出的流光登录(注释超详细!)

    这里设置了基本的表单样式,外层用了div进行包裹,重点是运用了两个i元素在后期通过css样式勾画出一条线没在聚焦文本框的时候线会过度成一个对话框,掩盖掉原本的对话框的形式,很好的一个创意   这里的对整个body进行了设置,并且清除了默认样式,设置了一些默认样

    2024年02月14日
    浏览(37)
  • cocos creator上架字节跳动(抖音)小游戏注意事项(匿名登录、录屏、分享等踩坑记录)

    常见拒绝原因1:小游戏无录屏功能,不符合平台要求 2:小游戏录屏时间小于3S,分享按钮点击无反应或提示错误文案,不符合平台要求 3:小游戏录屏时间大于300S,分享按钮点击无反应或无法正常分享录屏,不符合平台要求 不久前写了款小游戏,最近上架了字节跳动小游戏平

    2024年01月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包