css 简单的搜索框动画效果

代码如下：

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title&gt;Document</title&gt;
    <style>
        #searchbox {
            background-color: rgba(0, 0, 0, .35);
        }

        #searchbox:hover {
            background-color: rgba(15, 15, 15, .6);
        }

        .search {
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translateX(-50%);
            max-width: 80%;
            width: 230px;
            height: 43px;
            border-radius: 30px;
            color: #fff;
            background-color: rgba(255, 255, 255, .25);
            box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            overflow: hidden;
            transition: color .25s, background-color .25s, box-shadow .25s, left .25s, opacity .25s, top .25s, width .25s;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: black;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: black;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: black;
        }

        .search:hover {
            box-shadow: rgb(0 0 0 / 30%) 0 0 10px;
            width: 530px;
        }

        input {
            outline: 0;
            border: none;
            width: 100%;
            height: 100%;
            color: inherit;
            background-color: transparent;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="search" id="searchbox">
        <input id="search" autocomplete="off" type="text" class="search-input" placeholder="Search">
    </div>
</body>
<script>
    var search = document.querySelector('.search');
    var input = document.querySelector("input");
    var click = 0; // 0未点击 1点击
    input.onclick = function () {
        input.setAttribute('placeholder', '');  // 清空提示词
        search.style.width = '530px';   // 搜索框被点击放大效果
        click = 1;
    }
    input.onblur = function () {
        input.setAttribute('placeholder', 'Search');    // 还原提示词
        search.style.width = '230px';
        input.value = '';   // 失去焦点清空搜索内容
        click = 0;

    }
    search.onmouseover = function () {
        search.style.width = '530px';   // 鼠标经过放大效果
    }
    search.onmouseout = function () {
        if (click == 0) {
            search.style.width = '230px';   // 未点击
        } else {
            search.style.width = '530px';   // 被点击
        }
    }

</script>

</html>