XenForo-鼠标悬停时节点动画

XenForo-鼠标悬停时节点动画

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

欢迎客人!

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

• 文件链接损坏请在文件下方留言,我们将会及时更新来自备份服务器的新链接。如有其它问题请 提交工单 和我们联系!【加入QQ群:5977983】

• 我们拥有多账户检测系统,对于重复注册我们将采取严厉措施!快速获得积分

  • 点击此处领取红包积分/Click here to claim red envelope points

oksgo

管理成员
行政人员
VIP会员
声望: 45%
注册
10 16, 2023
消息
2,811
G
20,733 G
支持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; }
 
相似主题 最多查看 查看更多

类似的主题

添加代码到用户组CSS: 此 图片可下载到本地修改路径使用。
0
176
0
oksgo
登录XenForo后台--风格&语言-模板列表中搜索 extra.less 这个模板,并在此模板中加入下列代码: 效果如下图:
0
133
0
oksgo
后退
顶部