模板:首页/中栏/图鉴导航:修订间差异
无编辑摘要 |
无编辑摘要 |
||
(未显示同一用户的8个中间版本) | |||
第1行: | 第1行: | ||
<div class="nav-navigation"><!-- | <div class="nav-navigation"><!-- | ||
--><div class="nav-item"><!-- | --><div class="nav-item"><!-- | ||
第12行: | 第11行: | ||
--></div><!-- | --></div><!-- | ||
--><div class="nav-item"><!-- | --><div class="nav-item"><!-- | ||
--><a link=" | --><a link="武器图鉴" target="_blank"><!-- | ||
-->[[文件:首页-导航图标- | -->[[文件:首页-导航图标-音擎图鉴.png|149px|class="img"|link=]]<!-- | ||
--></a><!-- | --></a><!-- | ||
--></div><!-- | --></div><!-- | ||
--><div class="nav-item"><!-- | --><div class="nav-item"><!-- | ||
--><a link=" | --><a link="驱动图鉴" target="_blank"><!-- | ||
-->[[文件:首页-导航图标- | -->[[文件:首页-导航图标-驱动图鉴.png|149px|class="img"|link=]]<!-- | ||
--></a><!-- | --></a><!-- | ||
--></div> | --></div> | ||
</div> | </div> | ||
{{#css: | {{#css: | ||
.nav-item { | .nav-item { | ||
第33行: | 第31行: | ||
transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */ | transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */ | ||
box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */ | box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */ | ||
margin: | margin: 15px; /* 5px外边距 */ | ||
border: 2px solid #36363c; /* 添加边框 */ | |||
} | } | ||
.nav-item img { | .nav-item img { | ||
width: 100%; | width: 100%; | ||
第42行: | 第40行: | ||
opacity: 0.8; /* 初始透明度 */ | opacity: 0.8; /* 初始透明度 */ | ||
} | } | ||
.nav-item:hover { | .nav-item:hover { | ||
background-color: # | background-color: #BAD700; /* 鼠标悬停时背景色变化 */ | ||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */ | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */ | ||
} | } | ||
.nav-item:hover img { | .nav-item:hover img { | ||
transform: scale(1.05); /* 轻微放大 */ | transform: scale(1.05); /* 轻微放大 */ | ||
opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */ | opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */ | ||
} | } | ||
}} | }} |