3D 动画搜索栏

逃离我推掉我的手 2023-10-14 14:30 172阅读 0赞

3D 动画搜索栏

![在这里插入图片描述][2355bba3cf604953b88db94d53912cd9.gif_pic_center]

HTML 代码

CSS代码

.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;
    }

### 感谢您的阅读❤️！ ###

[2355bba3cf604953b88db94d53912cd9.gif_pic_center]: https://img-blog.csdnimg.cn/2355bba3cf604953b88db94d53912cd9.gif#pic_center