18种神奇超链接悬停动画特效_html 链接特效-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148401664

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>18种神奇超链接悬停动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: #f9f9f9;
color: #333;
line-height: 1.6;
padding: 40px;
}

.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
margin-bottom: 40px;
color: #2c3e50;
}

h2 {
margin: 30px 0 15px;
color: #3498db;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}

.link-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

.link-item {
margin-bottom: 25px;
}

.link-desc {
margin-bottom: 8px;
font-size: 14px;
color: #7f8c8d;
}

/* 基础链接样式 */
a {
color: #3498db;
text-decoration: none;
position: relative;
transition: all 0.3s ease;
padding: 5px 0;
}

/* 效果1: 下划线动画 */
.effect-1 a {
color: #e74c3c;
}
.effect-1 a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #e74c3c;
transition: width 0.3s ease;
}
.effect-1 a:hover::after {
width: 100%;
}

/* 效果2: 背景色填充 */
.effect-2 a {
color: #2c3e50;
padding: 5px 10px;
}
.effect-2 a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #3498db;
z-index: -1;
transition: width 0.3s ease;
}
.effect-2 a:hover {
color: white;
}
.effect-2 a:hover::before {
width: 100%;
}

/* 效果3: 左右滑动下划线 */
.effect-3 a {
color: #9b59b6;
}
.effect-3 a::before,
.effect-3 a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
background: #9b59b6;
transition: all 0.3s ease;
}
.effect-3 a::before {
left: 50%;
}
.effect-3 a::after {
right: 50%;
}
.effect-3 a:hover::before,
.effect-3 a:hover::after {
width: 50%;
}

/* 效果4: 圆形背景扩展 */
.effect-4 a {
color: #1abc9c;
padding: 5px 10px;
overflow: hidden;
}
.effect-4 a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(26, 188, 156, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
z-index: -1;
}
.effect-4 a:hover::before {
width: 200px;
height: 200px;
}

/* 效果5: 3D翻转 */
.effect-5 a {
color: #e67e22;
perspective: 500px;
display: inline-block;
}
.effect-5 a span {
display: inline-block;
transition: transform 0.3s ease;
}
.effect-5 a:hover span {
transform: rotateX(360deg);
}

/* 效果6: 文字抖动 */
.effect-6 a {
color: #d35400;
display: inline-block;
}
.effect-6 a:hover {
animation: shake 0.5s;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}

/* 效果7: 边框动画 */
.effect-7 a {
color: #34495e;
padding: 5px 10px;
}
.effect-7 a::before,
.effect-7 a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: #34495e;
transition: all 0.3s ease;
}
.effect-7 a::before {
top: 0;
left: 0;
}
.effect-7 a::after {
bottom: 0;
right: 0;
}
.effect-7 a:hover::before,
.effect-7 a:hover::after {
width: 100%;
}

/* 效果8: 文字颜色渐变 */
.effect-8 a {
background: linear-gradient(to right, #3498db, #9b59b6, #e74c3c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 100%;
transition: background-position 0.5s ease;
}
.effect-8 a:hover {
background-position: 100% 0;
}

/* 效果9: 上下划线 */
.effect-9 a {
color: #16a085;
}
.effect-9 a::before,
.effect-9 a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #16a085;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.effect-9 a::before {
top: 0;
transform-origin: left;
}
.effect-9 a::after {
bottom: 0;
transform-origin: right;
}
.effect-9 a:hover::before,
.effect-9 a:hover::after {
transform: scaleX(1);
}

/* 效果10: 文字放大 */
.effect-10 a {
color: #c0392b;
display: inline-block;
}
.effect-10 a:hover {
transform: scale(1.2);
}

/* 效果11: 斜体效果 */
.effect-11 a {
color: #8e44ad;
font-style: normal;
}
.effect-11 a:hover {
font-style: italic;
transform: skewX(-15deg);
}

/* 效果12: 文字阴影 */
.effect-12 a {
color: #27ae60;
text-shadow: 0 0 0 transparent;
transition: text-shadow 0.3s ease;
}
.effect-12 a:hover {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 效果13: 字母间距 */
.effect-13 a {
color: #2980b9;
letter-spacing: normal;
transition: letter-spacing 0.3s ease;
}
.effect-13 a:hover {
letter-spacing: 2px;
}

/* 效果14: 文字旋转 */
.effect-14 a {
color: #f39c12;
display: inline-block;
}
.effect-14 a:hover {
transform: rotate(5deg);
}

/* 效果15: 波浪下划线 */
.effect-15 a {
color: #d35400;
position: relative;
}
.effect-15 a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 4"><path fill="none" stroke="%23d35400" d="M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3" /></svg>') repeat-x;
background-size: 20px 4px;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.effect-15 a:hover::after {
transform: scaleX(1);
}

/* 效果16: 点状下划线 */
.effect-16 a {
color: #2c3e50;
}
.effect-16 a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background: linear-gradient(to right, #2c3e50 50%, transparent 50%);
background-size: 4px 2px;
background-repeat: repeat-x;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.effect-16 a:hover::after {
transform: scaleX(1);
}

/* 效果17: 文字模糊变清晰 */
.effect-17 a {
color: #7f8c8d;
filter: blur(1px);
transition: filter 0.3s ease;
}
.effect-17 a:hover {
filter: blur(0);
}

/* 效果18: 复合效果 */
.effect-18 a {
color: #e74c3c;
padding: 5px 10px;
border: 1px solid transparent;
transition: all 0.3s ease;
}
.effect-18 a:hover {
color: white;
background: #e74c3c;
border-color: #c0392b;
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.footer {
text-align: center;
margin-top: 50px;
color: #7f8c8d;
font-size: 14px;
}

.footer a {
color: #3498db;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1>18种神奇超链接悬停动画特效</h1>

<div class="link-list">

<div class="link-item effect-1">
<div class="link-desc">1. 下划线动画效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-2">
<div class="link-desc">2. 背景色填充效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-3">
<div class="link-desc">3. 左右滑动下划线</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-4">
<div class="link-desc">4. 圆形背景扩展</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-5">
<div class="link-desc">5. 3D翻转效果</div>
<a href="#"><span>悬停查看效果</span></a>
</div>


<div class="link-item effect-6">
<div class="link-desc">6. 文字抖动效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-7">
<div class="link-desc">7. 边框动画效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-8">
<div class="link-desc">8. 文字颜色渐变</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-9">
<div class="link-desc">9. 上下划线效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-10">
<div class="link-desc">10. 文字放大效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-11">
<div class="link-desc">11. 斜体倾斜效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-12">
<div class="link-desc">12. 文字阴影效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-13">
<div class="link-desc">13. 字母间距变化</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-14">
<div class="link-desc">14. 文字旋转效果</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-15">
<div class="link-desc">15. 波浪下划线</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-16">
<div class="link-desc">16. 点状下划线</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-17">
<div class="link-desc">17. 文字模糊变清晰</div>
<a href="#">悬停查看效果</a>
</div>


<div class="link-item effect-18">
<div class="link-desc">18. 复合动画效果</div>
<a href="#">悬停查看效果</a>
</div>
</div>


</div>
</body>
</html>