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

(创建页面,内容为“ <div class="ptlist"><!-- --><div class="ptlist-item"><!-- --><a link="代理人图鉴" target="_blank" class="ptlist-item-in"><!-- -->148px|class="avatar"|link=<!-- --></a><!-- --></div><!-- --><div class="ptlist-item"><!-- --><a link="代理人图鉴" target="_blank" class="ptlist-item-in"><!-- -->148px|class="avatar"|link=<!-- --></a><!-…”)
 
无编辑摘要
 
(未显示同一用户的18个中间版本)
第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"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!--
     -->[[文件:首页-导航图标-代理人图鉴.png|148px|class="avatar"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--
   --></div><!--
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in"><!--
--><a link="邦布图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|148px|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"><!--
--><a link="武器图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|148px|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"><!--
--><a link="驱动图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|148px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-驱动图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div>
   --></div>
</div>
</div>
{{#css:
  .nav-item {
    width: 149px;
    height: 149px;
    overflow: hidden;
    position: relative;
    display: inline-block; /* 确保图片按行排列 */
    background-color: transparent; /* 初始背景色透明 */
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */
    box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */
    margin: 15px; /* 5px外边距 */
    border: 2px solid #36363c; /* 添加边框 */
}
.nav-item img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.8; /* 初始透明度 */
}
.nav-item:hover {
    background-color: #BAD700; /* 鼠标悬停时背景色变化 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
.nav-item:hover img {
    transform: scale(1.05); /* 轻微放大 */
    opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */
}
}}

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