- 注册
- 10 16, 2023
- 消息
- 1,405
- G
- 1,856 G
- 主题 作者
- #1
支持XenForo 2.3
编辑 extra.less 模板:
编辑 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;
}