社区 › 站长之家 › 子比主题 – 侧边百度一下卡片样式

飞流 发表于 2025-10-10 15:41:44

子比主题 – 侧边百度一下卡片样式

一款子比主题侧边协助SEO优化的小工具，但UI设计实在太过陈旧，视觉体验不够出色。今天给大家带来一款全新设计的小卡片，清新美观，这一个小工具没打算写小工具，因为功能太少，直接用代码实现即可！来源：星雨博客


代码部署
将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可！
<style>
    .input__container {
      position: relative;
      padding: 10px 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      border-radius: 22px;
      max-width: 300px;
      transition: transform 400ms;
      transform-style: preserve-3d;
      perspective: 500px;
    }

    .shadow__input {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      z-index: -1;
      filter: blur(40px);
      border-radius: 20px;
      background: radial-gradient(circle at 25% 25%, #ff8fa0, transparent 40%),
            radial-gradient(circle at 75% 25%, #8ed6ff, transparent 40%),
            radial-gradient(circle at 25% 75%, #d08cff, transparent 40%),
            radial-gradient(circle at 75% 75%, #93ffcf, transparent 40%);
      background-size: 300% 300%;
      animation: gradientMove 8s infinite ease-in-out;
    }

    @keyframes gradientMove {
      0% {
            background-position: 0% 0%;
      }

      25% {
            background-position: 50% 25%;
      }

      50% {
            background-position: 100% 50%;
      }

      75% {
            background-position: 25% 75%;
      }

      100% {
            background-position: 0% 100%;
      }
    }

    .input__search {
      flex-grow: 1;
      border-radius: 20px;
      outline: none;
      border: none;
      padding: 8px;
      padding-left: 20px;
      position: relative;
    }

    .input__button__shadow {
      cursor: pointer;
      border: none;
      background: none;
      transition: transform 400ms, background 400ms;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      padding: 5px;
    }

    .input__button__shadow:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .wniui-seach {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100px;
      background-color: var(--main-bg-color);
      border-radius: 10px;
    }

    .wniui-baidu {
      position: absolute;
      top: 0;
      left: 0;
    }

    .wniui_prefix {
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      padding: 5px 5px;
      margin-right: 2px;
      height: 19px;
      vertical-align: middle;
      font-size: 12px;
      border-radius: .6em 2px;
      line-height: 1.4rem
    }

    .wniui_prefix:after {
      position: absolute;
      content: " ";
      display: block;
      width: 15px;
      height: 145%;
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
      animation: sweepTitle 3s ease-in-out infinite;
      transform: rotate(28deg)
    }

    @keyframes sweepTitle {
      0% {
            left: -100%
      }

      100% {
            left: 100%
      }
    }
</style>

<div class="wniui-seach">
    <span class="wniui_prefix wniui-baidu jb-pink">百度一下</span>
    <div class="input__container">
      <div class="shadow__input"></div>
      <input type="text" name="text" class="input__search" placeholder="腾飞博客">
      <button class="input__button__shadow">
            <img src="https://www.wniui.com/wp-content/uploads/2024/12/c9a03fb2b220241229141747.svg" alt="搜索">
      </button>
    </div>
</div>

<script>
    document.querySelector('.input__button__shadow').addEventListener('click', function () {
      const query = document.querySelector('.input__search').value.trim() || '腾飞博客';
      const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
      window.open(searchUrl, '_blank');
    });
</script>

查看完整版本: 子比主题 – 侧边百度一下卡片样式