|
|
| 第1行： |
第1行： |
| /* 这里放置的CSS将应用于所有皮肤 */ | | /* 这里放置的CSS将应用于所有皮肤 */ |
| /* 相关站点/友情链接容器 */
| |
| .other-sites {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, 1fr);
| |
| justify-items: center;
| |
| justify-content: center;
| |
| background: rgba(240, 240, 240, 0.8); /* 替换为你需要的背景色 */
| |
| }
| |
|
| |
| /* 单个站点图标 */
| |
| .other-sites .site {
| |
| position: relative;
| |
| cursor: pointer;
| |
| display: block;
| |
| width: 50px;
| |
| height: 50px;
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| margin-bottom: 30px;
| |
| margin-top: 30px;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| /* 隐藏链接默认下划线 */
| |
| .other-sites .site a:after {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* 图标hover放大+阴影 */
| |
| .other-sites .site:hover {
| |
| transform: scale3d(1.5, 1.5, 1.5);
| |
| filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
| |
| z-index: 20;
| |
| }
| |
|
| |
| /* 鼠标悬停显示提示文字 */
| |
| .site::after {
| |
| content: attr(data-content);
| |
| position: absolute;
| |
| top: calc(100% + 8px);
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| background-color: rgba(255, 255, 255, 0.95);
| |
| color: #333;
| |
| font-size: 12px;
| |
| padding: 4px 8px;
| |
| border-radius: 4px;
| |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
| |
| white-space: nowrap;
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| transition: all 0.3s ease;
| |
| z-index: 30;
| |
| }
| |
|
| |
| .site:hover::after {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| }
| |
|
| |
| /* 修复链接点击：始终可点击 */
| |
| .other-sites .site a {
| |
| pointer-events: auto;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| z-index: 10;
| |
| display: block;
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
|
| |
| /* 移动端适配 */
| |
| @media only screen and (max-width: 800px) {
| |
| .other-sites {
| |
| grid-template-columns: repeat(3, 1fr);
| |
| }
| |
|
| |
| .other-sites .site {
| |
| margin-bottom: 20px;
| |
| margin-top: 20px;
| |
| }
| |
|
| |
| .site::after {
| |
| white-space: normal;
| |
| width: min(75px, 33vw);
| |
| }
| |
| }
| |
|
| |
| /* 有趣的交互：hover时其他图标模糊缩小 */
| |
| .other-sites:has(.site:hover) .site:not(:hover) {
| |
| filter: blur(7px);
| |
| transform: scale(0.8);
| |
| }
| |
