WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」

093514

本文转载自搜源站，如本文侵权，请联系小编侵删！

在 WordPress 建站过程中，子比主题凭借其强大的功能和美观的界面深受广大站长喜爱。今天为大家带来一个超酷炫的子比主题美化技巧 —— 让文章封面缩略图在鼠标悬停时显示动态圆圈 LOGO，不仅能提升网站的整体视觉效果，还能增强用户体验，下面就来详细介绍。

一、子比主题美化特色：动态 LOGO 设计

子比主题美化在封面缩略图设计上独具匠心，采用了动态 LOGO这一设计元素。当用户鼠标悬停在封面缩略图上时，动态圆圈 LOGO 会缓缓展开，与此同时，更多关于子比主题美化的介绍和描述也会随之展示出来。通过这种方式，用户可以快速了解到这款主题的特色和亮点，既让封面缩略图更具吸引力，又为用户提供了一种直观获取信息的方式，大大提升了用户体验和使用便捷性。

二、操作步骤：为子比主题添加动态圆圈 LOGO 效果

  1. 准备工作：确保你使用的是 WordPress 的子比主题（zibll），且对主题设置有一定的操作权限。
  2. 添加 CSS 代码：这是实现该效果的关键步骤。将以下 CSS 代码追加保存到主题设置 -> 自定义代码 -> 自定义 CSS 代码中：
  3. LOGO可以换成自己的链接。

三、效果（一）

图片[1]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
图片[2]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
.item-thumbnail {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.item-thumbnail:hover {
  transform: translateY(-5px);
}

.item-thumbnail:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 8px;
  z-index: 2;
  max-width: 765px;
  margin: 0 auto;
  pointer-events: none;
  padding-left: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0);
}

.item-thumbnail:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  background: url(https://gcore.jsdelivr.net/gh/vipy800/viptu/img/logo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 3;
  transform: scale(0.8) rotate(-10deg);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

.item-thumbnail:hover:before {
  background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.item-thumbnail:hover:after {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  animation: pulse 1.5s infinite alternate ease-in-out;
}

@keyframes pulse {
  0% {
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
  }
  100% {
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.8));
  }
}

四、效果（二）

图片[3]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
图片[4]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
.item-thumbnail:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0);
  transition: background .35s;
  border-radius: 8px;
  z-index: 2;
  max-width: 765px;
  margin: 0 auto;
  pointer-events: none;
  padding-left: 10px
}

.item-thumbnail:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background: url(https://gcore.jsdelivr.net/gh/vipy800/viptu/img/logo.png);background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 3;
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: opacity .35s,-webkit-transform .35s;
  transition: transform .35s,opacity .35s;
  transition: transform .35s,opacity .35s,-webkit-transform .35s;
  opacity: 0;
  pointer-events: none;
}

.item-thumbnail:hover:before {
  background: rgba(0,0,0,.5)
}

.item-thumbnail:hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1
}

五、效果（三）

图片[5]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
图片[6]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
.item-thumbnail {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.item-thumbnail:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  border-radius: 12px;
  z-index: 2;
  max-width: 765px;
  margin: 0 auto;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.item-thumbnail:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: url(https://gcore.jsdelivr.net/gh/vipy800/viptu/img/logo.png) center/contain no-repeat;
  z-index: 3;
  transform: scale(1.8) rotate(15deg);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}
.item-thumbnail:hover:before {
  background: rgba(0,0,0,0.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-radius: 16px;
}
.item-thumbnail:hover:after {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

六、效果（四）

图片[7]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
图片[8]-WordPress 子比主题美化教程：文章封面缩略图悬停展示动态LOGO「子比主题美化」-追梦人
.item-thumbnail {
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 8px;
}

.item-thumbnail:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.item-thumbnail:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(66, 0, 255, 0.2) 0%, rgba(255, 0, 140, 0.2) 100%);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 8px;
  z-index: 2;
  max-width: 765px;
  margin: 0 auto;
  pointer-events: none;
  padding-left: 10px;
  backdrop-filter: blur(0px);
}

.item-thumbnail:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: url(https://gcore.jsdelivr.net/gh/vipy800/viptu/img/logo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 3;
  transform: scale(0) translateY(20px);
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.item-thumbnail:hover:before {
  background: linear-gradient(135deg, rgba(66, 0, 255, 0.6) 0%, rgba(255, 0, 140, 0.4) 100%);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.item-thumbnail:hover:after {
  transform: scale(1) translateY(0);
  opacity: 1;
  animation: float 3s infinite ease-in-out, glow 2s infinite alternate;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-10px) rotate(5deg) scale(1.05);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(66, 0, 255, 0.6));
  }
}

.item-thumbnail::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(45deg, #ff00cc, #3300ff, #00ccff, #ff00cc);
  background-size: 400% 400%;
  z-index: -1;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: gradientBG 6s ease infinite;
}

.item-thumbnail:hover::before {
  opacity: 1;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
温馨提示：本文最后更新于2025-06-04 11:19:03，文章具有时效性，若有错误或失效，请在下方留言或联系站长邮箱。
本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
Wordpress
# 子比美化# WordPress优化# 子比主题# CSS# 鼠标特效# CSS特效
喜欢就支持一下吧
点赞14 分享
dreamren的头像-追梦人
用户中心添加UID、注册时间等-教程及代码 – 子比主题美化-追梦人
用户中心添加UID、注册时间等-教程及代码 – 子比主题美化
用户中心添加UID、注册时间等-教程及代码 – 子比主题美化
11天前 2761
「WordPress优化」增加一个用户登录后右下角弹窗提示登录ip 登录时间 判断是否正常的代码-追梦人
「WordPress优化」增加一个用户登录后右下角弹窗提示登录ip 登录时间 判断是否正常的代码
「WordPress优化」增加一个用户登录后右下角弹窗提示登录ip 登录时间...
11天前 2291
Zibll 子比主题添加全网热搜榜单教程Wordpress美化必备-追梦人
Zibll 子比主题添加全网热搜榜单教程Wordpress美化必备
Zibll 子比主题添加全网热搜榜单教程Wordpress美化必备
10天前 1477
为WordPress网站添加一个灵动岛「为页面加入访问提示-灵动岛样式」-追梦人
为WordPress网站添加一个灵动岛「为页面加入访问提示-灵动岛样式」
为WordPress网站添加一个灵动岛「为页面加入访问提示-灵动岛样式」
6天前 1437
【Centos】腾讯云、阿里云服务器 Centos 7 挂载数据盘-追梦人
【Centos】腾讯云、阿里云服务器 Centos 7 挂载数据盘
【Centos】腾讯云、阿里云服务器 Centos 7 挂载数据盘
6天前 1333
文章底部添加最后更新时间或过期失效提示 – 子比主题美化-追梦人
文章底部添加最后更新时间或过期失效提示 – 子比主题美化
文章底部添加最后更新时间或过期失效提示 – 子比主题美化
11天前 1193
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

最近文章最近发表的文章
最近评论
标签云
鼠标特效 (1)鼠标手势 (1)鸿蒙智行 (0)金蝶K3 (1)逢人且说三分话 (1)软件推荐 (1)软件分享 (1)身份证校验 (1)读书笔记 (3)诗词 (1)评论框优化 (1)装机必备 (1)虚拟机网络 (1)苹果iPhone (0)网页排版 (1)网站设计 (5)网站美化 (1)网站合规 (1)网站优化 (1)缘起缘灭 (1)
多栏目文章

用户中心添加UID、注册时间等-教程及代码 – 子比主题美化

用户中心添加UID、注册时间等-教程及代码 – 子比主题美化-追梦人
文章介绍了一种通过在 WordPress 主题的 `func.php` 文件或 `functions.php` 文件中添加 PHP 函数，实现用户信息自定义显示的方法。该函数 `ZbTool_user_id_to_desc` 用于在用户页面或作者页头...
Wordpress# 子比美化# WordPress优化
dreamren的头像-追梦人dreamren11天前
027619

「WordPress优化」增加一个用户登录后右下角弹窗提示登录ip 登录时间 判断是否正常的代码

「Wordpress优化」增加一个用户登录后右下角弹窗提示登录ip 登录时间 判断是否正常的代码-追梦人
通过向主题的 `functions.php` 或子比主题的 `func.php` 文件中添加指定的 PHP 函数代码，用户可实现登录安全提醒功能。该功能在用户非移动端登录时，显示包含当前登录 IP 和时间的安全提示信息...
Wordpress# 子比美化# WordPress优化# 登录安全
dreamren的头像-追梦人dreamren11天前
0229110

Zibll 子比主题添加全网热搜榜单教程Wordpress美化必备

Zibll 子比主题添加全网热搜榜单教程-追梦人
本教程提供了一种将全网热搜榜单添加到使用 Zibll 子比主题的 WordPress 网站的方法。通过保存并上传名为 resou.php 的 PHP 文件，并在 WordPress 后台选择合适模板，即可在网站上展示来自多个...
Wordpress# 子比美化# WordPress优化# 热搜榜单
dreamren的头像-追梦人dreamren10天前
0147714

为WordPress网站添加一个灵动岛「为页面加入访问提示-灵动岛样式」

为Wordpress网站添加一个灵动岛-追梦人
文章介绍了如何通过三步操作实现网站的动态灵动岛访问页面提示效果。第一步，将灵动岛的CSS样式代码添加至网站自定义CSS区域，以控制其样式与动画效果。第二步，在HTML头部插入带有通知图标的动...
Wordpress# 子比美化# 子比主题# 灵动岛
dreamren的头像-追梦人dreamren6天前
0143713

【Centos】腾讯云、阿里云服务器 Centos 7 挂载数据盘

【Centos】腾讯云、阿里云服务器 Centos 7 挂载数据盘-追梦人
由于系统盘满载，作者在腾讯和阿里服务器上增加了一个50G的数据盘，并记录了挂载流程。首先，在服务器后台将数据盘绑定到指定服务器。然后，进入终端，使用命令fdisk -l查看硬盘信息，并在fdisk...
系统运维# 服务器挂载# 数据盘分区
dreamren的头像-追梦人dreamren6天前
0133315

文章底部添加最后更新时间或过期失效提示 – 子比主题美化

文章底部添加最后更新时间或过期失效提示 – 子比主题美化-追梦人
本文介绍了如何在Wordpress文章添加过期失效提示功能的方法，作者表示已经应用该功能并认为比较实用。主要分为三个步骤：第一，将提供的PHP代码添加到主题的function.php或func.php文件中；第二...
Wordpress# 子比美化# WordPress优化# 文章提示
dreamren的头像-追梦人dreamren11天前
011937
加载更多