主题定制器
恢复此模板上的自定义修改
最新消息
  • 我们很荣幸 游客 的加入!开始前请阅读 社区规则 以及 知识库 确保您顺利的熟悉本社区。如果您乐意分享您独特的内容,您将获得积分及其它特权!

    任何人都可以提交免费资源,积分资源及付费资源!如若高贵的 游客 您想赚取真实货币,请尝试提交 付费文件 资料。

    文件链接损坏请以 提交工单 方式给我们留言,以获取来自备份服务器的新链接。

oksgo

Tutorial/教程 XenForo-鼠标悬停时节点动画

oksgo

Administrator

管理成员
贡献: 100%
注册
2023/10/16
消息
788
反馈评分
340
点数
63
G
3,885 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;
}
 

相似主题

Tutorial/教程 付费用户升级小部件
转到 widgets admin.php?widgets,选择添加 HTML 小部件并编写代码: div class=lines div class=line style=width: 69px;/div div class=line style=width: 59px;/div...
回复
1
查看
230
只需将以下代码添加到主题的extra.less模板中即可。 //- Hizli ozelestirme seçenekleri @xgt-konu-ap: transparent; @xgt-konu-secilmis-ap: rgb(255, 248, 238); @xgt-konu-golgesi: 0 1px 4px rgba(0, 0, 0, 0.28)...
回复
1
查看
438
Add-ons/Plugins BS-ChatGPT Framework
oksgo 提交新资源: ChatGPT Framework - ChatGPT Framework 1.5.1 Integrate OpenAIs state-of-the-art language model into your XenForo 2 forum with the ChatGPT Framework add-on. This add-on provides a...
回复
1
查看
341
Add-ons/Plugins [Xen-Soluce] Invite System
Charly submitted a new resource: [Xen-Soluce] Invite System - [Xen-Soluce] Invite System Description : This add-on allow you to generate invitation codes to join your forum and more. Invitation...
回复
1
查看
1K
转到 widgets admin.php?widgets,选择添加 HTML 小部件并编写代码: div class=filter p class=title_itemsType/p ul li input id=all name=type type=radio label...
回复
1
查看
223

最新资源

顶部