105 lines
2.7 KiB
CSS
105 lines
2.7 KiB
CSS
|
/* 为整个工具卡片添加链接样式 */
|
||
|
|
.tool-card-link {
|
||
|
|
text-decoration: none; /* 去掉链接的下划线 */
|
||
|
|
}
|
||
|
|
/* 保证工具卡片正常排列 */
|
||
|
|
.tools-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 保证工具卡片的顺序 */
|
||
|
|
.tool-card {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column; /* 使 logo 在上，名称在下 */
|
||
|
|
align-items: flex-start; /* 左对齐 */
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||
|
|
padding: 20px;
|
||
|
|
text-align: left; /* 左对齐 */
|
||
|
|
min-height: 180px;
|
||
|
|
transition: transform 0.5s ease, box-shadow 0.5s ease; /* 工具卡片动画时间设置为 0.5s */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 工具卡片动画完成状态 */
|
||
|
|
.tool-card.animated {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0); /* 恢复到正常位置 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 工具卡片悬停效果 */
|
||
|
|
.tool-card:hover {
|
||
|
|
transform: scale(1.03);
|
||
|
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 工具卡片logo样式 */
|
||
|
|
.tool-logo {
|
||
|
|
margin-left: 30px;
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 50px; /* 设置logo的宽度 */
|
||
|
|
height: 50px;
|
||
|
|
margin-bottom: 10px; /* 给logo和名称之间留出间距 */
|
||
|
|
border-radius: 8px; /* 设置圆角矩形 */
|
||
|
|
object-fit: cover; /* 保证图片不会被拉伸或变形 */
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 工具名称的样式 */
|
||
|
|
.tool-name {
|
||
|
|
margin-left: 30px;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333;
|
||
|
|
text-decoration: none;
|
||
|
|
position: relative; /* 使下划线定位相对 */
|
||
|
|
display: inline-block; /* 确保工具名称独占一行 */
|
||
|
|
text-align: left; /* 左对齐 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 工具名称的下划线效果 */
|
||
|
|
.tool-name::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
bottom: -5px;
|
||
|
|
left: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 2px;
|
||
|
|
background-color: black;
|
||
|
|
transition: width 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool-name:hover::after {
|
||
|
|
width: 100%; /* 让下划线横跨整个文字 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 分类标签样式 */
|
||
|
|
.tool-category {
|
||
|
|
display: inline-block; /* 使标签处于同一行 */
|
||
|
|
padding: 4px 16px; /* 胶囊形状的内边距，横向较宽 */
|
||
|
|
background-color: #fc8f8f; /* 背景颜色 */
|
||
|
|
color: #ffffff; /* 文字颜色 */
|
||
|
|
font-size: 10px; /* 字体大小 */
|
||
|
|
font-weight: bold; /* 加粗字体 */
|
||
|
|
border-radius: 50px; /* 设置圆角，形成胶囊形状 */
|
||
|
|
margin-left: 30px;
|
||
|
|
margin-top: 10px; /* 给标签和描述之间留出间距 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 工具描述样式 */
|
||
|
|
.card-description {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #777;
|
||
|
|
margin-left: 30px;
|
||
|
|
margin-top: 10px; /* 给描述添加上边距 */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 悬停效果 */
|
||
|
|
.tool-card:hover {
|
||
|
|
transform: scale(1.03);
|
||
|
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|