HTML文本悬停显示特效_html 文字hover-优快云博客

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

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本悬停特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
color: #333;
}

.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

h1 {
margin-bottom: 40px;
font-weight: 600;
font-size: 2.5rem;
background: linear-gradient(90deg, #6a11cb, #2575fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.hover-text-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-bottom: 50px;
}

.hover-text {
position: relative;
font-size: 1.5rem;
font-weight: 500;
cursor: default;
transition: all 0.3s ease;
}

/* 特效1 - 下划线动画 */
.effect-1 {
padding-bottom: 5px;
}

.effect-1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, #ff8a00, #e52e71);
transition: width 0.3s ease;
}

.effect-1:hover::after {
width: 100%;
}

/* 特效2 - 文字放大变色 */
.effect-2:hover {
transform: scale(1.1);
color: #e52e71;
text-shadow: 0 0 10px rgba(229, 46, 113, 0.3);
}

/* 特效3 - 3D浮动效果 */
.effect-3 {
perspective: 1000px;
}

.effect-3 span {
display: inline-block;
transition: transform 0.3s ease;
}

.effect-3:hover span {
transform: translateZ(30px);
color: #2575fc;
}

/* 特效4 - 文字背景填充 */
.effect-4 {
background: linear-gradient(90deg, #6a11cb, #2575fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
z-index: 1;
}

.effect-4::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(90deg, #ff8a00, #e52e71);
z-index: -1;
transition: width 0.3s ease;
}

.effect-4:hover::before {
width: 100%;
}

/* 特效5 - 文字抖动 */
.effect-5:hover {
animation: shake 0.5s ease infinite alternate;
}

@keyframes shake {
0% { transform: translateX(-3px) rotate(-1deg); }
25% { transform: translateX(3px) rotate(1deg); }
50% { transform: translateX(-3px) rotate(-1deg); }
75% { transform: translateX(3px) rotate(1deg); }
100% { transform: translateX(-3px) rotate(-1deg); }
}

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

.footer a {
color: #2575fc;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}

.footer a:hover {
color: #e52e71;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>文本悬停特效展示</h1>

<div class="hover-text-container">
<div class="hover-text effect-1">下划线动画效果</div>
<div class="hover-text effect-2">放大变色效果</div>
<div class="hover-text effect-3"><span>3D浮动效果</span></div>
<div class="hover-text effect-4">背景填充效果</div>
<div class="hover-text effect-5">文字抖动效果</div>
</div>
</div>

<div class="footer">

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