css ——搜索框（精灵技术)

一、搜索框（精灵技术)

未点击的效果图

点击后的效果图

html

<section class="shop-sousu">
               <input type="text" name="" id="" placeholder="搜索偶像、商品">
               <span class="sectbtn"></span>
              </section>

这里用的是sass写的（影响不大）css

.shop-sousu {
            display: flex;
            height: 30px;
            padding-top: 23px;
            padding-left: 200px;
            box-sizing: border-box;
            position: relative;


            input {
                border: none;