✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 二次元渐变效果五格小工具 ...
    返回列表 发布新帖
    查看: 67|回复: 0

    [代码技巧] 子比主题 – 二次元渐变效果五格小工具

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

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

    积分成就
       钻石 : 524 颗
       贡献 : 1457 点
       金币 : 12 枚
    Icon在线时间 : 1294 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2025-10-29

    荣誉勋章

    会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

    风云·优秀版主
    飞流名人堂成员

    1

    实名认证 手机认证 vip vip-year FLLTCN发表于 2025-10-6 21:37:10 | 查看全部 |阅读模式 浙江金华

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

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

    ×
    这是一款首页的二次元渐变效果五格小工具，我觉得加上去比较美观，对于昼夜模式说适配也适配，说没有适配也没有适配，就是可以用，效果还是不错的，喜欢的自行部署吧！
    image.webp
    代码部署
    一共两个代码，一个是HTML代码和CSS代码，话不多说直接开始
    HTML代码
    将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML代码即可，自己改一下内容
    1. <div class="home-row-left content-area ">
    2. <div id="html-box-qkyl_sdk" class="html-box">
    3. <div data-v-d1c115ee="" class="course-project-panel-course">
    4. <ul data-v-d1c115ee="">
    5. <li data-v-d1c115ee="">
    6. <a data-v-d1c115ee="" href="https://tfbkw.com/" target="_blank">
    7. <div data-v-d1c115ee="" class="top">
    8. <p data-v-d1c115ee="" class="title nike">腾飞博客</p>
    9. <p data-v-d1c115ee="" class="describe">欢迎大家来访</p>
    10. <p data-v-d1c115ee="" class="describe">有幸遇见，恰巧合拍</p>
    11. <div data-v-d1c115ee="" class="line nike-line"> </div>
    12. <button data-v-d1c115ee="" type="button" class="nike-btn ivu-btn ivu-btn-default ivu-btn-circle">
    13. <span>查看详情</span>
    14. </button>
    15. </div>
    16. <div data-v-d1c115ee="" class="bottom nike-bottom">
    17. <p data-v-d1c115ee="" class="title">腾飞博客</p>
    18. <p data-v-d1c115ee="" class="describe">欢迎大家来访</p>
    19. <p data-v-d1c115ee="" class="describe">有幸遇见</p>
    20. <div data-v-d1c115ee="" class="line"></div>
    21. <button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
    22. <span>查看详情</span>
    23. </button>
    24. </div>
    25. </a>
    26. </li>
    27. <li data-v-d1c115ee="">
    28. <a data-v-d1c115ee="" href="https://tfbkw.com/" class="">
    29. <div data-v-d1c115ee="" class="top">
    30. <p data-v-d1c115ee="" class="title vip">美化教程</p>
    31. <p data-v-d1c115ee="" class="describe">优美的你</p>
    32. <p data-v-d1c115ee="" class="describe">愿你吉祥</p>
    33. <div data-v-d1c115ee="" class="line vip-line"> </div>
    34. <button data-v-d1c115ee="" type="button" class="vip-btn ivu-btn ivu-btn-default ivu-btn-circle">
    35. <span>查看详情</span>
    36. </button>
    37. </div>
    38. <div data-v-d1c115ee="" class="bottom vip-bottom">
    39. <p data-v-d1c115ee="" class="title">美化教程</p>
    40. <p data-v-d1c115ee="" class="describe">优美的你</p>
    41. <p data-v-d1c115ee="" class="describe">愿你吉祥</p>
    42. <div data-v-d1c115ee="" class="line"></div>
    43. <button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
    44. <span>
    45. <span data-v-d1c115ee="">查看详情</span>
    46. </span>
    47. </button>
    48. </div>
    49. </a>
    50. </li>
    51. <li data-v-d1c115ee="">
    52. <a data-v-d1c115ee="" href="https://tfbkw.com/" class="">
    53. <div data-v-d1c115ee="" class="top">
    54. <p data-v-d1c115ee="" class="title routine">系统科技</p>
    55. <p data-v-d1c115ee="" class="describe">每一章都很优质</p>
    56. <p data-v-d1c115ee="" class="describe">学习更加轻松哦</p>
    57. <div data-v-d1c115ee="" class="line routine-line"></div>
    58. <button data-v-d1c115ee="" type="button" class="routine-btn ivu-btn ivu-btn-default ivu-btn-circle">
    59. <span>查看详情</span>
    60. </button>
    61. </div>
    62. <div data-v-d1c115ee="" class="bottom routine-bottom">
    63. <p data-v-d1c115ee="" class="title">系统科技</p>
    64. <p data-v-d1c115ee="" class="describe">每一章都很优质</p>
    65. <p data-v-d1c115ee="" class="describe">学习更加轻松哦</p>
    66. <div data-v-d1c115ee="" class="line"></div>
    67. <button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
    68. <span>查看详情</span>
    69. </button>
    70. </div>
    71. </a>
    72. </li>
    73. <li data-v-d1c115ee="">
    74. <a data-v-d1c115ee="" href="https://tfbkw.com/" class="">
    75. <div data-v-d1c115ee="" class="top">
    76. <p data-v-d1c115ee="" class="title ten">Android</p>
    77. <p data-v-d1c115ee="" class="describe">原始的质感</p>
    78. <p data-v-d1c115ee="" class="describe">带你步入高效的殿堂</p>
    79. <div data-v-d1c115ee="" class="line ten-line"> </div>
    80. <button data-v-d1c115ee="" type="button" class="ten-btn ivu-btn ivu-btn-default ivu-btn-circle">
    81. <span>查看详情</span>
    82. </button>
    83. </div>
    84. <div data-v-d1c115ee="" class="bottom ten-bottom">
    85. <p data-v-d1c115ee="" class="title">Android</p>
    86. <p data-v-d1c115ee="" class="describe">原始的质感</p>
    87. <p data-v-d1c115ee="" class="describe">带你步入高效的殿堂</p>
    88. <div data-v-d1c115ee="" class="line"> </div>
    89. <button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
    90. <span>查看详情</span>
    91. </button>
    92. </div>
    93. </a>
    94. </li>
    95. <li data-v-d1c115ee="">
    96. <a data-v-d1c115ee="" href="https://tfbkw.com/" target="_blank">
    97. <div data-v-d1c115ee="" class="top">
    98. <p data-v-d1c115ee="" class="title double">实用云址</p>
    99. <p data-v-d1c115ee="" class="describe">每一个地址</p>
    100. <p data-v-d1c115ee="" class="describe">都是我们的好帮手</p>
    101. <div data-v-d1c115ee="" class="line double-line"> </div>
    102. <button data-v-d1c115ee="" type="button" class="double-btn ivu-btn ivu-btn-default ivu-btn-circle">
    103. <span>查看详情</span>
    104. </button>
    105. </div>
    106. <div data-v-d1c115ee="" class="bottom double-bottom">
    107. <p data-v-d1c115ee="" class="title">实用云址</p>
    108. <p data-v-d1c115ee="" class="describe">每一个地址</p>
    109. <p data-v-d1c115ee="" class="describe">都是我们的好帮手</p>
    110. <div data-v-d1c115ee="" class="line"></div>
    111. <button data-v-d1c115ee="" type="button" class="bottom-btn ivu-btn ivu-btn-default ivu-btn-circle">
    112. <span>查看详情</span>
    113. </button>
    114. </div>
    115. </a>
    116. </li>
    117. </ul>
    118. </div>
    119. </div>
    120. </div>
    复制代码
    CSS代码
    将下面的代码放到：子比主题–>>自定义CSS样式即可！
    1.     .course-project-panel-course[data-v-d1c115ee] {
    2.         padding: 24px 0;
    3.         border-radius: 10px
    4.         }
    5.         .course-project-panel-course ul[data-v-d1c115ee] {
    6.         display: flex;
    7.         justify-content: space-around
    8.         }
    9.         .course-project-panel-course ul li[data-v-d1c115ee] {
    10.         width: 100%;
    11.         cursor: pointer;
    12.         border-right: 1px solid #eaeaea;
    13.         position: relative
    14.         }
    15.         .course-project-panel-course ul li .top[data-v-d1c115ee] {
    16.         text-align: center;
    17.         opacity: 1;
    18.         transition-duration: 1.5s
    19.         }
    20.         .course-project-panel-course ul li .top .title[data-v-d1c115ee] {
    21.         font-size: 22px;
    22.         font-weight: 700;
    23.         padding: 24px 0 20px
    24.         }
    25.         .course-project-panel-course ul li .top .describe[data-v-d1c115ee] {
    26.         font-size: 14px;
    27.         color: #484848
    28.         }
    29.         .course-project-panel-course ul li .top .line[data-v-d1c115ee] {
    30.         width: 24px;
    31.         height: 4px;
    32.         background-color: #31a86c;
    33.         margin: 10px auto 40px;
    34.         border-radius: 50px
    35.         }
    36.         .course-project-panel-course ul li .top .ivu-btn[data-v-d1c115ee] {
    37.         font-size: 13px;
    38.         width: 134px;
    39.         height: 40px;
    40.         color: #fff
    41.         }
    42.         .course-project-panel-course ul li .top .vip[data-v-d1c115ee] {
    43.         color: #31a86c
    44.         }
    45.         .course-project-panel-course ul li .top .vip-line[data-v-d1c115ee] {
    46.         background-color: #31a86c
    47.         }
    48.         .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee] {
    49.         background-color: #9bd5b8;
    50.         border: 0 solid #0054f0 !important
    51.         }
    52.         .course-project-panel-course ul li .top .vip-btn[data-v-d1c115ee]:hover {
    53.         border: none;
    54.         background-color: #31a86c
    55.         }
    56.         .course-project-panel-course ul li .top .routine[data-v-d1c115ee] {
    57.         color: #ff902e
    58.         }
    59.         .course-project-panel-course ul li .top .routine-line[data-v-d1c115ee] {
    60.         background-color: #ff902e
    61.         }
    62.         .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee] {
    63.         background-color: #fac6a1;
    64.         border: 0 solid #0054f0 !important
    65.         }
    66.         .course-project-panel-course ul li .top .routine-btn[data-v-d1c115ee]:hover {
    67.         border: none;
    68.         background-color: #ff902e
    69.         }
    70.         .course-project-panel-course ul li .top .ten[data-v-d1c115ee] {
    71.         color: #31a89b
    72.         }
    73.         .course-project-panel-course ul li .top .ten-line[data-v-d1c115ee] {
    74.         background-color: #31a89b
    75.         }
    76.         .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee] {
    77.         background-color: #7fc7c0;
    78.         border: 0 solid #0054f0 !important
    79.         }
    80.         .course-project-panel-course ul li .top .ten-btn[data-v-d1c115ee]:hover {
    81.         border: none;
    82.         background-color: #31a89b
    83.         }
    84.         .course-project-panel-course ul li .top .double[data-v-d1c115ee] {
    85.         color: #ffc343
    86.         }
    87.         .course-project-panel-course ul li .top .double-line[data-v-d1c115ee] {
    88.         background-color: #ffc343
    89.         }
    90.         .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee] {
    91.         background-color: #fbd78b;
    92.         border: 0 solid #0054f0 !important
    93.         }
    94.         .course-project-panel-course ul li .top .double-btn[data-v-d1c115ee]:hover {
    95.         border: none;
    96.         background-color: #ffc343
    97.         }
    98.         .course-project-panel-course ul li .top .nike[data-v-d1c115ee] {
    99.         color: #439bff
    100.         }
    101.         .course-project-panel-course ul li .top .nike-line[data-v-d1c115ee] {
    102.         background-color: #439bff
    103.         }
    104.         .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee] {
    105.         background-color: #8abffc;
    106.         border: 0 solid #0054f0 !important
    107.         }
    108.         .course-project-panel-course ul li .top .nike-btn[data-v-d1c115ee]:hover {
    109.         border: none;
    110.         background-color: #439bff
    111.         }
    112.         .course-project-panel-course ul li .vip-bottom[data-v-d1c115ee] {
    113.         background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Scd1vz1QbInG3kAFN_!!2210123621994.png) 0 0 no-repeat
    114.         }
    115.         .course-project-panel-course ul li .routine-bottom[data-v-d1c115ee] {
    116.         background: url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01ny1YUo1QbInIBgqcd_!!2210123621994.png) 0 0 no-repeat
    117.         }
    118.         .course-project-panel-course ul li .ten-bottom[data-v-d1c115ee] {
    119.         background: url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01YOasqO1QbInG3m6mG_!!2210123621994.png) 0 0 no-repeat
    120.         }
    121.         .course-project-panel-course ul li .double-bottom[data-v-d1c115ee] {
    122.         background: url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01sQy60I1QbInHmwkxu_!!2210123621994.png) 0 0 no-repeat
    123.         }
    124.         .course-project-panel-course ul li .nike-bottom[data-v-d1c115ee] {
    125.         background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN011D4kwJ1QbInIBhBOe_!!2210123621994.png) 0 0 no-repeat
    126.         }
    127.         .course-project-panel-course ul li .bottom[data-v-d1c115ee] {
    128.         width: 256px;
    129.         height: 268px;
    130.         color: #1b1b1b;
    131.         border-radius: 10px;
    132.         padding: 46px 28px 0;
    133.         position: absolute;
    134.         left: 0;
    135.         top: -28px;
    136.         opacity: 0;
    137.         transform: scale(1);
    138.         transition-duration: .5s
    139.         }
    140.         .course-project-panel-course ul li .bottom .title[data-v-d1c115ee] {
    141.         font-size: 23px;
    142.         padding-bottom: 24px
    143.         }
    144.         .course-project-panel-course ul li .bottom .describe[data-v-d1c115ee] {
    145.         font-size: 14px
    146.         }
    147.         .course-project-panel-course ul li .bottom .line[data-v-d1c115ee] {
    148.         width: 24px;
    149.         height: 4px;
    150.         background-color: #fff;
    151.         margin: 15px 0 30px;
    152.         border-radius: 50px
    153.         }
    154.         .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee] {
    155.             width: 80%;
    156.             border: none;
    157.             background-color: transparent; /* 改为透明 */
    158.             font-size: 13px;
    159.             height: 40px;
    160.             color: #0c301e;
    161.             text-shadow: 0 3px 20px #3c6751;
    162.             text-align: center;
    163.         }
    164.         .course-project-panel-course ul li .bottom .bottom-btn[data-v-d1c115ee]:hover {
    165.             background-color: transparent; /* 改为透明 */
    166.         }
    167.         .course-project-panel-course ul li[data-v-d1c115ee]:last-child {
    168.         border-right: none
    169.         }
    170.         .course-project-panel-course ul li:hover .top[data-v-d1c115ee] {
    171.         opacity: 0;
    172.         transition-duration: .5s
    173.         }
    174.         .course-project-panel-course ul li:hover .bottom[data-v-d1c115ee] {
    175.         transform: scale(1.05);
    176.         opacity: 1;
    177.         transition-duration: 1s
    178.         }
    复制代码
    附件下载
    附件可以下也可以不下，因为我上传了永久存储，留个附件也可以，自己也可以本地一下！
    2025-10-6 21:36 上传
    文件大小:
    166 KB
    下载次数:
    0
    下载积分:
    贡献 -50 点, 经验 1 值
    本地下载 检测资源
    提取码: UU7s
    严禁发布违规违法的信息内容链接，违者经审查后予以警告或封号处理！



    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

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

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

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

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

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

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

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

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

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

    常用功能

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

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-11-8 02:02 , Processed in 0.092449 second(s), 62 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表