6月4号笔记
七种不同形式的超链接：
代码演示：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>7 种不同风格超链接</title>
<!-- 使用 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
/* ----- 全局重置 & 排版 ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f0f4f8;
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
padding: 2rem 1rem;
}
.container {
max-width: 820px;
width: 100%;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
border-radius: 2.5rem;
padding: 3rem 2.5rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.02);
transition: all 0.2s;
}
h1 {
font-weight: 600;
font-size: 1.9rem;
letter-spacing: -0.5px;
color: #0b1e2e;
margin-bottom: 0.3rem;
}
.subhead {
color: #5b6f82;
font-weight: 400;
font-size: 1rem;
border-left: 3px solid #7c8ea0;
padding-left: 1rem;
margin-bottom: 2.5rem;
opacity: 0.8;
}
/* ----- 每个链接卡片 ----- */
.link-grid {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.link-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1.2rem;
padding: 0.25rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.link-item .label {
min-width: 85px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #7a8b9e;
background: rgba(0, 0, 0, 0.02);
padding: 0.2rem 0.8rem;
border-radius: 30px;
display: inline-block;
}
.link-item .demo-area {
display: flex;
align-items: center;
flex: 1;
min-height: 3.8rem;
padding: 0.2rem 0;
}
/* ----- 所有超链接基础重置 ----- */
a {
text-decoration: none;
transition: all 0.2s ease;
}
/* ============================================================
1. 经典下划线链接 (Type 1)
============================================================ */
.link-1 {
color: #1f3a5f;
font-weight: 500;
font-size: 1.1rem;
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.link-1:hover {
border-bottom-color: #1f3a5f;
color: #0b1e2e;
}
/* ============================================================
2. 圆角按钮链接 (Type 2)
============================================================ */
.link-2 {
display: inline-block;
background: #1f3a5f;
color: #fff;
font-weight: 500;
padding: 0.65rem 1.8rem;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(31, 58, 95, 0.25);
letter-spacing: 0.3px;
font-size: 0.95rem;
}
.link-2:hover {
background: #142b47;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(31, 58, 95, 0.30);
}
/* ============================================================
3. 图标 + 文字 (Type 3)
============================================================ */
.link-3 {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #2b4b6f;
font-weight: 500;
font-size: 1.05rem;
padding: 0.4rem 0.8rem;
border-radius: 40px;
background: rgba(31, 58, 95, 0.05);
transition: all 0.2s;
}
.link-3 i {
font-size: 1.2rem;
color: #3d6a95;
transition: transform 0.2s;
}
.link-3:hover {
background: rgba(31, 58, 95, 0.12);
color: #0f2a44;
}
.link-3:hover i {
transform: translateX(4px) scale(1.05);
}
/* ============================================================
4. 块级卡片链接 (Type 4)
============================================================ */
.link-4 {
display: flex;
align-items: center;
gap: 1rem;
background: #ffffff;
padding: 0.8rem 1.6rem;
border-radius: 20px;
border: 1px solid #e6edf4;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
color: #1f3a5f;
font-weight: 500;
min-width: 200px;
transition: all 0.25s;
}
.link-4 i {
font-size: 1.5rem;
color: #3d6a95;
opacity: 0.7;
}
.link-4 .arrow {
margin-left: auto;
opacity: 0.3;
font-size: 0.9rem;
transition: all 0.2s;
}
.link-4:hover {
border-color: #b6ccdf;
box-shadow: 0 10px 28px rgba(31, 58, 95, 0.08);
transform: translateY(-2px);
background: #fafcff;
}
.link-4:hover .arrow {
opacity: 1;
transform: translateX(4px);
}
/* ============================================================
5. 下划线滑动动画 (Type 5)
============================================================ */
.link-5 {
position: relative;
display: inline-block;
color: #1f3a5f;
font-weight: 500;
font-size: 1.1rem;
padding-bottom: 4px;
}
.link-5::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2.5px;
background: linear-gradient(90deg, #1f3a5f, #5b8db8);
transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.link-5:hover {
color: #0b1e2e;
}
.link-5:hover::after {
width: 100%;
}
/* ============================================================
6. 霓虹发光渐变 (Type 6)
============================================================ */
.link-6 {
display: inline-block;
padding: 0.6rem 2rem;
font-weight: 600;
font-size: 1rem;
border-radius: 60px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: #fff;
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.35);
letter-spacing: 0.5px;
transition: all 0.3s;
}
.link-6:hover {
transform: scale(1.03) translateY(-2px);
box-shadow: 0 12px 32px rgba(245, 87, 108, 0.50);
color: #fff;
}
/* ============================================================
7. 边框虚线 + 悬停填充 (Type 7)
============================================================ */
.link-7 {
display: inline-block;
padding: 0.5rem 1.8rem;
font-weight: 500;
font-size: 0.95rem;
color: #1f3a5f;
border: 2px dashed #b6ccdf;
border-radius: 40px;
background: transparent;
transition: all 0.3s;
position: relative;
}
.link-7:hover {
background: #1f3a5f;
color: #fff;
border-color: #1f3a5f;
border-style: solid;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(31, 58, 95, 0.20);
}
/* ----- 小屏适配 ----- */
@media (max-width: 580px) {
.container {
padding: 2rem 1.2rem;
}
.link-item {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
padding: 0.8rem 0;
}
.link-item .label {
min-width: auto;
font-size: 0.7rem;
}
.link-item .demo-area {
width: 100%;
min-height: 3.2rem;
}
.link-4 {
width: 100%;
}
}
/* 额外的精致感 */
.footer-note {
margin-top: 2.8rem;
font-size: 0.8rem;
color: #9aabbb;
text-align: center;
border-top: 1px solid #e4eaf0;
padding-top: 1.8rem;
letter-spacing: 0.3px;
}
.footer-note a {
color: #5b7d9e;
border-bottom: 1px dotted #c0d2e2;
}
.footer-note a:hover {
color: #1f3a5f;
border-bottom-color: #1f3a5f;
}
</style>
</head>
<body>
<div class="container">
<h1>🔗 七种超链接</h1>
<div class="subhead">不同的形式 · 不同的个性 · 同样的点击</div>
<div class="link-grid">
<!-- 1. 经典下划线 -->
<div class="link-item">
<span class="label">① 经典</span>
<div class="demo-area">
<a href="#" class="link-1">优雅下划线链接</a>
</div>
</div>
<!-- 2. 按钮风格 -->
<div class="link-item">
<span class="label">② 按钮</span>
<div class="demo-area">
<a href="#" class="link-2">立即体验</a>
</div>
</div>
<!-- 3. 图标 + 文字 -->
<div class="link-item">
<span class="label">③ 图标</span>
<div class="demo-area">
<a href="#" class="link-3">
<i class="fas fa-arrow-right"></i>
带箭头图标
</a>
</div>
</div>
<!-- 4. 块级卡片 -->
<div class="link-item">
<span class="label">④ 卡片</span>
<div class="demo-area">
<a href="#" class="link-4">
<i class="fas fa-folder-open"></i>
<span>查看项目</span>
<span class="arrow"><i class="fas fa-chevron-right"></i></span>
</a>
</div>
</div>
<!-- 5. 下划线滑动动画 -->
<div class="link-item">
<span class="label">⑤ 动画</span>
<div class="demo-area">
<a href="#" class="link-5">滑动下划线</a>
</div>
</div>
<!-- 6. 霓虹渐变 -->
<div class="link-item">
<span class="label">⑥ 霓虹</span>
<div class="demo-area">
<a href="#" class="link-6">渐变霓虹</a>
</div>
</div>
<!-- 7. 虚线边框填充 -->
<div class="link-item">
<span class="label">⑦ 虚线</span>
<div class="demo-area">
<a href="#" class="link-7">虚线边框</a>
</div>
</div>
</div>
<div class="footer-note">
✦ 悬停或点击查看效果 · 所有链接均为演示 <a href="#">#</a>
</div>
</div>
</body>
</html>
效果图：
浙公网安备 33010602011771号