用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;
}
# 前端 # css # html
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

什么是人工智能大模型？

avatar 讯飞AI开发者社区

企业选型必看！大模型5大分类全解析，避坑指南+落地建议，收藏这篇就够了！

在人工智能飞速发展的今天，大语言模型（Large Language Models, LLM）已成为推动技术进步的核心引擎。然而，随着应用场景的不断拓展，不同类型的LLM也应运而生。本文将带你系统了解当前主流的大模型分类及其核心特点。

avatar 讯飞AI开发者社区

号课堂§2.2：声明范式

声明式语言——尤其是函数式语言和逻辑式语言——擅长基于数理逻辑的应用，如人工智能、符号处理、数据库、编译器等，对基于业务逻辑的、尤其是交互式或事件驱动型的应用就不那么得心应手了。命令式编程模拟电脑运算，是行动导向的，关键在于定义解法，即“怎么做”，因而算法是显性而目标是隐性的；声明式编程模拟人脑思维，是目标驱动的，关键在于描述问题，即“做什么”，因而目标是显性而算法是隐性的。”冒号娓娓道来，“除了

avatar 讯飞AI开发者社区