模板:首页/中栏/图鉴导航:修订间差异

无编辑摘要
无编辑摘要
 
(未显示同一用户的15个中间版本)
第1行: 第1行:
 
<div class="nav-navigation"><!--
<div class="ptlist"><!--
--><div class="nav-item"><!--
--><div class="ptlist-item"><!--
--><a link="代理人图鉴" target="_blank"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--
   --></div><!--
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
--><a link="邦布图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-邦布图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--  
   --></div><!--  
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
--><a link="武器图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-音擎图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--
   --></div><!--
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
--><a link="驱动图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-驱动图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div>
   --></div>
</div>
</div>
{{#css:
{{#css:
.ptlist-item-in-cat {
  .nav-item {
  position: relative;
    width: 149px;
  z-index: 10;
    height: 149px;
  box-sizing: content-box;
    overflow: hidden;
  display: block;
    position: relative;
  padding-bottom: 0.25rem;
    display: inline-block; /* 确保图片按行排列 */
  background-color: #1a1a1a; /* 暗黑色背景 */
    background-color: transparent; /* 初始背景色透明 */
  color: #ccc; /* 浅灰色文本 */
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* 添加平滑过渡效果 */
    box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */
    margin: 15px; /* 5px外边距 */
    border: 2px solid #36363c; /* 添加边框 */
}
}
 
.nav-item img {
.ptlist-item-in-cat::after {
    width: 100%;
  content: '';
    height: 100%;
  width: 90%;
    transition: transform 0.5s ease, opacity 0.5s ease;
  height: 90%;
    opacity: 0.8; /* 初始透明度 */
  position: absolute;
  left: 5%;
  top: 5%;
  border: 1px solid #333; /* 暗灰色边框 */
  transition: border-color 0.3s ease-in-out; /* 添加边框颜色过渡 */
}
}
 
.nav-item:hover {
.ptlist-item-in-cat:hover {
    background-color: #BAD700; /* 鼠标悬停时背景色变化 */
  background-color: #333; /* 鼠标悬浮时背景颜色变暗 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  color: #fff; /* 鼠标悬浮时文本颜色变为白色 */
}
}
 
.nav-item:hover img {
.ptlist-item-in-cat:hover::after {
    transform: scale(1.05); /* 轻微放大 */
  border-color: #555; /* 鼠标悬浮时边框颜色变亮 */
    opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */
}
 
.ptlist-item-in-cat {
  height: auto; /* 保持高度自适应 */
}
}
}}
}}

2024年7月8日 (一) 17:35的最新版本