ここで私がインターネット上でまとめた知識の一部を皆さんに共有しますので、皆さんのお役に立てれば幸いです。

序文

今日は、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タグを使用して入力ボックスを作成し、後続の 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%的时间点进行了变化。 move2和 move3动画，控制了一个伪元素的位置在不同时间点的变化。在这个动画中，伪元素的位置分别在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;
}

レコード --css ドロップレットログインインターフェイス

ここで私がインターネット上でまとめた知識の一部を皆さんに共有しますので、皆さんのお役に立てれば幸いです。

序文

基本的なHTMLフレームワーク

フォームスタイル

总代码

HTML部分

CSS部分

本文转载于:

https://juejin.cn/post/7225623397144199228

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

おすすめ

レコード --css ドロップレット ログイン インターフェイス

ここで私がインターネット上でまとめた知識の一部を皆さんに共有しますので、皆さんのお役に立てれば幸いです。

序文

基本的なHTMLフレームワーク

フォームスタイル

总代码

HTML部分

CSS部分

本文转载于:

https://juejin.cn/post/7225623397144199228

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

おすすめ

レコード --css ドロップレットログインインターフェイス