墨滴

ㅤㅤㅤyunk

V1

2023/05/09阅读：51主题：凝夜紫

用CSS实现漂亮的搜索框，让你的网站瞬间高大上！

用CSS实现漂亮的搜索框，让你的网站瞬间高大上！

搜索框是网页中不可或缺的元素之一，能够让用户快速地找到他们所需要的信息。一个漂亮的搜索框能够为网站增添不少色彩和个性。本文将会教大家如何用 CSS 实现一个漂亮的搜索框，让你的网站瞬间高大上！

首先，我们需要设置搜索框的样式。通过设置搜索框的大小、背景色、边框、圆角等属性，可以让搜索框看起来更加美观和舒适。同时，我们还可以利用伪元素和渐变等技巧为搜索框添加一些阴影和渐变效果，让它看起来更加立体和有层次感。

l0cxaof4eoaer80nkrww
l0cxaof4eoaer80nkrww

其次，我们需要让搜索框水平和垂直居中。这里可以通过设置父元素的 display 和 justify-content 属性来水平居中，通过设置父元素的 display 和 align-items 属性来垂直居中。如果父元素的高度和宽度是已知的，我们还可以通过设置父元素的 position 和 top、bottom、left、right 属性来实现居中效果。

最后，我们可以为搜索框添加一些交互效果，比如鼠标移动到搜索按钮时，按钮的背景色会变淡，让用户可以更清晰地看到自己的操作。我们还可以通过 JavaScript 为搜索框添加一些自动完成、搜索建议等功能，提高用户的使用体验。

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>
</head>
<body>
  <div class="input__container">
  <div class="shadow__input"></div>
  <button class="input__button__shadow">
    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20px" width="20px">
      <path d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z" fill-rule="evenodd" fill="#17202A"></path>
    </svg>
  </button>
  <input type="text" name="text" class="input__search" placeholder="What do you want to search?">
</div>
</body>
</html>

CSS代码

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
    
  .input__container {
    position: relative;
    background: rgba(255, 255, 255, 0.664);
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 22px;
    max-width: 300px;
    transition: transform 400ms;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateY(-20deg);
    perspective: 500px;
  }

  /* Visit https://democoding.in/ for more free css animation */

.shadow__input {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(30px);
  border-radius: 20px;
  background-color: #999cff;
  background-image: radial-gradient(at 85% 51%, hsla(60,60%,61%,1) 0px, transparent 50%),
    radial-gradient(at 74% 68%, hsla(235,69%,77%,1) 0px, transparent 50%),
    radial-gradient(at 64% 79%, hsla(284,72%,73%,1) 0px, transparent 50%),
    radial-gradient(at 75% 16%, hsla(283,60%,72%,1) 0px, transparent 50%),
    radial-gradient(at 90% 65%, hsla(153,70%,64%,1) 0px, transparent 50%),
    radial-gradient(at 91% 83%, hsla(283,74%,69%,1) 0px, transparent 50%),
    radial-gradient(at 72% 91%, hsla(213,75%,75%,1) 0px, transparent 50%);
}

.input__button__shadow {
  cursor: pointer;
  border: none;
  background: none;
  transition: transform 400ms, background 400ms;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  padding: 5px;
}

.input__button__shadow:hover {
  background: rgba(255, 255, 255, 0.411);
}

.input__search {
  width: 100%;
  border-radius: 20px;
  outline: none;
  border: none;
  padding: 8px;
  position: relative;
}

综上所述，本文通过实例的方式为大家介绍了如何用 CSS 实现漂亮的搜索框，并探讨了搜索框的水平和垂直居中方法和一些交互效果。通过本文的学习，相信大家可以为自己的网站添加一个漂亮、实用的搜索框，提升用户体验和网站的使用价值。

分类：

前端

标签：

前端

作者介绍

ㅤㅤㅤyunk
V1