HTML 文字悬停分割特效

原创已于 2025-06-27 13:57:21 修改 · 325 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2025-05-27 15:07:14 首次发布

<!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>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
margin: 0;
overflow: hidden;
}

.container {
text-align: center;
}

h1 {
position: relative;
font-size: 4rem;
color: #333;
cursor: pointer;
margin: 0;
padding: 0;
line-height: 1.2;
}

.split-text {
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease;
}

h1:hover .split-text {
transform: translateY(-20px);
opacity: 0.3;
}

h1:hover .split-text:nth-child(2n) {
transform: translateY(20px);
}

.link {
margin-top: 50px;
font-size: 1.2rem;
color: #666;
}

.link a {
color: #0066cc;
text-decoration: none;
transition: color 0.3s;
}

.link a:hover {
color: #004499;
}
</style>
</head>
<body>
<div class="container">
<h1>
<span class="split-text">文</span>
<span class="split-text">字</span>
<span class="split-text">悬</span>
<span class="split-text">停</span>
<span class="split-text">分</span>
<span class="split-text">割</span>
<span class="split-text">特</span>
<span class="split-text">效</span>
</h1>

<div class="link">

</div>
</div>