📌  相关文章
📜  如何使用 HTML 和 CSS 创建动画搜索框?

📅  最后修改于: 2021-08-31 02:35:49             🧑  作者: Mango

任务是使用 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     

       
             
  


输出: