用HTML、CSS写一个酷炫的动态搜索框

最新推荐文章于 2024-04-18 13:51:27 发布

林多多@

最新推荐文章于 2024-04-18 13:51:27 发布

阅读量2.2k

点赞数 3

分类专栏：初学者学习前端文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_59816940/article/details/123217623

版权

初学者学习前端专栏收录该内容

22 篇文章 2 订阅

订阅专栏

用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>Serach</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="searchBox">
        <div class="shadow"></div>
        <input type="text" placeholder="Serach Anything You want">
        <ion-icon name="search"></ion-icon>
    </div>
    <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</body>
</html>

CSS部分：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #cfd1e1;
    overflow: hidden;
}

.searchBox {
    position: relative;
    width: 65px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.searchBox:hover {
    width: 400px;
}

.searchBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(#fff, #fff, #fff);
    z-index: 1;
    filter: blur(1px);
}

.searchBox::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 10px;
    height: 100%;
    background: #9d9d9d;
    z-index: 1;
    filter: blur(1px);
}

.shadow {
    position: absolute;
    top: 0;
    left: -50px;
    width: calc(100% + 50px);
    height: 300px;
    background: linear-gradient(180dge, rgba(0, 0, 0, 0.1), transparent, transparent);
    transform-origin: top;
    transform: skew(45deg);
    pointer-events: none;
}

.shadow::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background: #cfd1e1;

}

.searchBox input {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    padding: 10px 25px;
    outline: none;
    font-size: 1.1em;
    color: #555;
    background: linear-gradient(#dbdae1, #a3aaba);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1),
        15px 15px 15px rgba(0, 0, 0, 0.1),
        20px 20px 20px rgba(0, 0, 0, 0.1),
        30px 30px 30px rgba(0, 0, 0, 0.1),
        inset 1px 1px 2px #fff;
}

.searchBox input::placeholder .searchBox input {
    color: transparent;
}

.searchBox:hover input::placeholder .searchBox:hover input {
    color: #555;
}

ion-icon {
    position: absolute;
    right: 20px;
    color: #555;
    font-size: 1.5em;
    cursor: pointer;
}