如何使用 HTML 和 CSS 创建动画搜索框？

任务是使用 HTML 和 CSS 创建一个动画搜索框。搜索栏是网站最重要的组成部分之一。基本上，它用于将人们与网站联系起来。面对纷繁复杂的网页内容，用户通过搜索关键字来表达自己的需求，期望得到准确的信息和快速的结果。

方法：

第 1 步：这里我们在 HTML 部分使用了一个 input 元素。

Step2：添加CSS代码，使其具有吸引力。

input[type=text] {
    width: 150px;
    box-sizing: border-box;
    border: 4px solid green
    border-radius: 6px;
    font-size: 26px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;  
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.3s ease-in-out; 
}
input[type=text]:hover {
    width: 90%;
}

例子：

HTML

  

    

  

    
GeeksforGeeks
    

        Create an Animated Search 
        Box using HTML and CSS
    
  
    

        
    

  

输出：