挂件头衔✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注切换到宽版
  • 首页
  • 社区
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 侧边百度一下卡片样式
    返回列表 发布新帖
    查看: 182|回复: 0

    [代码技巧] 子比主题 – 侧边百度一下卡片样式

    [复制链接]
    社区贡献

    331

    主题

    204

    回帖

    2万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 293 颗
       贡献 : 460 点
       金币 : 24 枚
    Icon在线时间 : 1735 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-6-15

    荣誉勋章

    累计签到LV.3任务·年会员幸运抽奖·皇幸运抽奖·尊幸运抽奖·豪起源之星摩羯座推广LV.2钻石LV.1注册一周年

    总共送礼：1 个    总共收礼：0 个

    功勋·创世元老
    飞流名人堂成员 1 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-10 15:41:44 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

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

    image.webp

    代码部署


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

    16.     .shadow__input {
    17.         content: "";
    18.         position: absolute;
    19.         width: 100%;
    20.         height: 100%;
    21.         left: 0;
    22.         bottom: 0;
    23.         z-index: -1;
    24.         filter: blur(40px);
    25.         border-radius: 20px;
    26.         background: radial-gradient(circle at 25% 25%, #ff8fa0, transparent 40%),
    27.             radial-gradient(circle at 75% 25%, #8ed6ff, transparent 40%),
    28.             radial-gradient(circle at 25% 75%, #d08cff, transparent 40%),
    29.             radial-gradient(circle at 75% 75%, #93ffcf, transparent 40%);
    30.         background-size: 300% 300%;
    31.         animation: gradientMove 8s infinite ease-in-out;
    32.     }

    34.     @keyframes gradientMove {
    35.         0% {
    36.             background-position: 0% 0%;
    37.         }

    39.         25% {
    40.             background-position: 50% 25%;
    41.         }

    43.         50% {
    44.             background-position: 100% 50%;
    45.         }

    47.         75% {
    48.             background-position: 25% 75%;
    49.         }

    51.         100% {
    52.             background-position: 0% 100%;
    53.         }
    54.     }

    56.     .input__search {
    57.         flex-grow: 1;
    58.         border-radius: 20px;
    59.         outline: none;
    60.         border: none;
    61.         padding: 8px;
    62.         padding-left: 20px;
    63.         position: relative;
    64.     }

    66.     .input__button__shadow {
    67.         cursor: pointer;
    68.         border: none;
    69.         background: none;
    70.         transition: transform 400ms, background 400ms;
    71.         display: flex;
    72.         justify-content: center;
    73.         align-items: center;
    74.         border-radius: 12px;
    75.         padding: 5px;
    76.     }

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

    82.     .wniui-seach {
    83.         position: relative;
    84.         display: flex;
    85.         justify-content: center;
    86.         align-items: center;
    87.         width: 100%;
    88.         height: 100px;
    89.         background-color: var(--main-bg-color);
    90.         border-radius: 10px;
    91.     }

    93.     .wniui-baidu {
    94.         position: absolute;
    95.         top: 0;
    96.         left: 0;
    97.     }

    99.     .wniui_prefix {
    100.         overflow: hidden;
    101.         display: inline-flex;
    102.         align-items: center;
    103.         padding: 5px 5px;
    104.         margin-right: 2px;
    105.         height: 19px;
    106.         vertical-align: middle;
    107.         font-size: 12px;
    108.         border-radius: .6em 2px;
    109.         line-height: 1.4rem
    110.     }

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

    123.     @keyframes sweepTitle {
    124.         0% {
    125.             left: -100%
    126.         }

    128.         100% {
    129.             left: 100%
    130.         }
    131.     }
    132. </style>

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

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


    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-6-16 00:59 , Processed in 0.084295 second(s), 76 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表