用HTML + Css3实现炫酷的输入框效果

七月_Mo

已于 2022-12-02 13:18:07 修改

阅读量1.1k

点赞数

分类专栏： css 文章标签： css css3 html

于 2022-12-02 13:16:12 首次发布

本文链接：https://blog.csdn.net/Mozifei73/article/details/128146402

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

展示一下效果图
在这里插入图片描述

是哒，该效果就是用css写出来的，现在直接上代码

<!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>
</head>

<body>
    <div class="box">
        <div class="inputBox">
            <input type="text" required>
            <span>账号</span>
        </div>
        <div class="inputBox">
            <input type="text" required>
            <span>密码</span>
        </div>
    </div>
</body>

<style lang="less">
    body {
        background-color: rgb(1, 39, 39);
    }

    .box {
        margin: 0 auto;
        width: 300px;
        margin-top: 300px;
    }

    .inputBox {
        margin: 20px 0;
        position: relative;
        font-size: 20px;
    }

    .inputBox input {
        /* position: absolute; */
        height: 2em;
        padding: 5px 10px;
        background-color: transparent;
        border-radius: 5px;
        color: #fff;
        border: 1px solid rgb(31, 191, 202);
        font-size: 1em;
    }

    .inputBox span {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 0 10px;
        background-color: rgb(1, 39, 39);
        transition: .5s;
        color: rgba(255, 255, 255, 0.575);
    }

    .inputBox input:valid+span,
    .inputBox input:focus+span {
        /* top: -10px; */
        color: aqua;
        border-left: 1px solid rgb(10, 223, 223);
        border-right: 1px solid rgb(6, 226, 226);
        letter-spacing: .2em;
        transform: translateY(-15px);
        font-size: .5em;
    }
</style>

</html>