22.图标动画搜索框

Posted @大迁世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了22.图标动画搜索框相关的知识，希望对你有一定的参考价值。

效果 (源码网盘地址在最后)


关注公众号《大迁世界》，查看更多视频教程！

源码

index.hmtl

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Search Box</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="searchBox">
    <div class="search">
      <ion-icon name="search-outline"></ion-icon>
    </div>
    <div class="searchInput">
      <input type="text" placeholder="Search here . . .">
    </div>
    <div class="close">
      <ion-icon name="close-outline">

以上是关于22.图标动画搜索框的主要内容，如果未能解决你的问题，请参考以下文章