听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳
一个搜索框笔记63

在哔哩哔哩上看到到的一个搜索框

typecho可以用下面代码,无需再改typecho搜索框代码(typecho直接用)

记一下代码:

/**搜索框*/
div.search-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ffffffbd;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
}
.search-box:hover>.search-txt{
    width: 200px;
    padding: 0 6px;
}

.search-box:hover>.search-btn{
    background: white;
}
.search-btn{
    color: #de5086ba;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3648;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.search-txt{
    border: none;
    background: none;
    outline: none;
    float: 0;
    color: #000;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
}
<form method="post">
                       <div class="search-box" style="top: 35px;margin: 0% 0% 0px 35%;">
                     
                      <input class="search-txt" type="text" name="s" class="text"/>
                      <a class="search-btn type="submit" class="submit"">
                          <svg t="1627368601249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15551" width="20" height="20"><path d="M227.21480001 221.98226667A318.0996 318.0996 0 0 0 139.59440001 506.66666667c18.9504-86.0076 63.50399999-170.0496 132.90479999-239.5008C341.9504 197.68946667 425.9924 153.16106666 512 134.21066667c-100.04400001-18.84960001-207.39600001 10.3572-284.78519999 87.7716z" fill="#d81e06" p-id="15552"></path><path d="M981.98 811.93946667l-119.80079999-119.8008a116.17199999 116.17199999 0 0 0-91.35000001-33.5916c112.66919999-162.96839999 96.39-388.23120001-48.7116-533.35799999-163.3464-163.3968-428.2488-163.3968-591.64559999-1e-8-163.3464 163.3968-163.3464 428.3244 0 591.72119999 145.1016 145.12679999 370.188 161.28 533.25719999 48.61080001-2.52 32.75999999 8.7192 66.47759999 33.59159999 91.35000001l119.80080001 119.826c45.36000001 45.25919999 119.4732 45.25919999 164.7324 0 45.48600001-45.25919999 45.48600001-119.39760001 0.12599999-164.75760002zM673.532 668.19866667c-136.50840001 136.50840001-357.714 136.50840001-494.172 0-136.50840001-136.50840001-136.50840001-357.7644 0-494.2728 136.458-136.50840001 357.66360001-136.50840001 494.172 0 136.48320001 136.40759999 136.48320001 357.7644 0 494.2728z" fill="#1296db" p-id="15553"></path></svg>
                      </a></form>
                         </div>
文章数

67篇

评论数

170

分类数

6

页面数

6

标签


笔记 typecho 日常 小说 pjax 温柔文案 字体 故事 生活文字 ajax lazyload jsDelivr 自适应 分页样式 主题 功能 以德服人 郭德纲 相声 扁食 表情 源码 英语 流光按钮 主题设置

一个搜索框笔记


2021 年