XenForo-鼠标悬停时节点动画

XenForo-鼠标悬停时节点动画

  • 主题发起人 主题发起人 oksgo
  • 开始时间 开始时间

Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 很荣幸 游客 的到来!开始前请阅读 社区规则 确保您顺利的熟悉本社区。注册用户可以提交资源,如果您有已发布资源的新版本,您可以随时更新版本!

    文件链接损坏,请在文件下方留言,我们将会及时更新来自备份服务器的新链接。提示:如果您的账户超过180天处于非活动状态,系统将自动删除您的账户!

  • 我们拥有多账户检测系统,对于重复注册我们将采取严厉措施!我们欢迎一切的 捐赠!有任何问题请论坛发帖或者与我们联系!

    We have a multi-account detection system and will take strict measures against duplicate registrations! We welcome all Donations! For any questions, please post on the forum or to contact us!

oksgo

Administrator

管理成员
贡献: 21%
注册
10 16, 2023
消息
1,101
支持XenForo 2.3

编辑 extra.less 模板:
CSS:
//*****************************************************//
//* Creates shadows and scales nodes when mouse hover *//
//*****************************************************//

/* Prepare node for effects */

.template-forum_list .block-container .node {
 
    /* Remove previous box border */
    border-style: none;
 
    /* For positioning the pseudo-element */
    position: relative;
 
    /* Add shadow effect to non-hover nodes */
    box-shadow: 2px 2px 1px 0px rgba(99, 99, 99, 0.3);    /* box-shadow: x-offset y-offset blur spread rgba(r, g, b, opacity) */
 
    /* transition time to ease back original state (slower) */
    transition: 200ms ease;
}

/* Create the hidden pseudo shadow element */

.template-forum_list .block-container .node::before {
 
    /* Position the pseudo shadow element. */
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
 
    /* Create the box shadow at expanded size. */
    box-shadow: 0 0 8px 3px rgba(66, 66, 66, 0.7);
 
    /* Hidden by default. */
    opacity: 0;
 
    /* transition time to ease back original state (slower) */
    transition: opacity 200ms;
}

/* Show the pseudo-element on hover */

.template-forum_list .block-container .node:hover::before {
    opacity: 1;
 
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Scale up the box (node) on hover */

.template-forum_list .block-container .node:hover {
    transform: scale(1.025);
 
    /* transition time after mouse hover (fast) */
    transition: 40ms ease;
}

/* Adjust Node Title underline position after scale up */

.node-title {
    text-underline-offset: 2px;
}

/* Adjust Sub-node underline position after scale up */

.node-subNodesFlat {
    text-underline-offset: 2px;
}
 

相似主题

  • 置顶
  • 已特色
XenForo 2.3.3 发布 我们强烈建议所有运行旧版 XenForo 2.3 的客户升级到此版本,以提升稳定性。 全新安装包 完整升级包 2.3.3 中的一些变化包括: 修复软删除线程上的选择引用处理程序错误 如果 Redis 主机看起来是文件路径,则忽略端口 修复了一些哈希被连接而不是传递给路由器的情况 修复 JS 图标渲染器的闪烁问题 修复可扩展内容转换类回调 查找 Stripe...
0
38
0
  • 置顶
这里有一个有关如何成功从 2.2 升级到 2.3 的简单指南。 将 XenForo 安装从版本 2.2 升级到版本 2.3 需要仔细规划和执行。如果您没有进行任何研究就直接点击升级按钮,则可能会遇到问题。本指南将引导您完成整个过程,以确保顺利过渡。 ⚠️首先在重复的论坛上进行测试!⚠️ ⚠️禁用您配置的任何缓存!⚠️ 阅读缓存手册并从“true”转到“false” - 不要忘记返回。...
1
15
0
登录XenForo后台--风格&语言-模板列表中搜索 extra.less 这个模板,并在此模板中加入下列代码: 效果如下图:
0
11
0
  • 置顶
一、XenForo 安装教程 1. 环境准备 1.1. 检查服务器配置确保你的服务器满足 XenForo 的系统要求: 操作系统:Linux(推荐),Windows 或 Mac OS 也可以使用。 Web 服务器:Apache 2.4 或 Nginx 1.18 及以上版本。 PHP:支持 PHP 7.4 至 PHP 8.2(推荐 PHP 8.0 或 8.1)。...
0
14
0
在 XenForo 中,文件的哈希值用于确保文件的完整性,特别是在安装或升级 XenForo 时,系统会检查文件的哈希值是否与官方提供的哈希值一致。如果你手动修改了 XenForo 的文件,系统可能会检测到文件的哈希值与原来的不匹配,进而可能导致警告或功能问题。 要修改 XenForo 文件的哈希值,通常需要更新 XenForo 的文件校验数据。以下是一些方法和步骤: 1.绕过哈希值校验...
0
8
0
后退
顶部