模板:首页/中栏/图鉴导航：修订间差异
无编辑摘要 |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
<div class=" | <div class="nav-navigation"><!-- | ||
--><div class=" | --><div class="nav-item"><!-- | ||
--><a link="代理人图鉴" target="_blank | --><a link="代理人图鉴" target="_blank"><!-- | ||
-->[[文件:首页-导航图标-代理人图鉴.png|149px|class=" | -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!-- | ||
--></a><!-- | --></a><!-- | ||
--></div><!-- | --></div><!-- | ||
--><div class=" | --><div class="nav-item"><!-- | ||
--><a link="邦布图鉴" target="_blank | --><a link="邦布图鉴" target="_blank"><!-- | ||
-->[[文件:首页-导航图标-邦布图鉴.png|149px|class=" | -->[[文件:首页-导航图标-邦布图鉴.png|149px|class="img"|link=]]<!-- | ||
--></a><!-- | --></a><!-- | ||
--></div><!-- | --></div><!-- | ||
--><div class=" | --><div class="nav-item"><!-- | ||
--><a link="代理人图鉴" target="_blank | --><a link="代理人图鉴" target="_blank"><!-- | ||
-->[[文件:首页-导航图标-代理人图鉴.png|149px|class=" | -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!-- | ||
--></a><!-- | --></a><!-- | ||
--></div><!-- | --></div><!-- | ||
--><div class=" | --><div class="nav-item"><!-- | ||
--><a link="代理人图鉴" target="_blank"><!-- | |||
-->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!-- | |||
--></a><!-- | |||
--></div> | --></div> | ||
</div> | </div> | ||
{{#css: | {{#css: | ||
. | .nav-item { | ||
width: 149px; | |||
height: 149px; | |||
overflow: hidden; | |||
position: relative; | position: relative; | ||
display: inline-block; /* 确保图片按行排列 */ | |||
display: block | background-color: transparent; /* 初始背景色透明 */ | ||
transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */ | |||
background-color: | box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */ | ||
} | |||
transition: background-color 0. | |||
.nav-item img { | |||
width: 100%; | |||
height: 100%; | |||
transition: transform 0.5s ease, opacity 0.5s ease; | |||
width: 100%; | opacity: 0.8; /* 初始透明度 */ | ||
height: 100%; | } | ||
.nav-item:hover { | |||
background-color: #bad700; /* 鼠标悬停时背景色变化 */ | |||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */ | |||
} | |||
.nav-item:hover img { | |||
background-color: | transform: scale(1.05); /* 轻微放大 */ | ||
opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */ | |||
} | |||
}} | }} | ||
2024年6月3日 (一) 00:32的版本
