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

[oksgo]

支持XenForo 2.3

编辑 extra.less 模板：

//*****************************************************//
//* 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;
}

 

求助/help  导入中文语言包有大量过时短语需处理

Tutorial/教程  VPS融合怪服务器测评脚本