纯CSS3悬停文字边框动画特效

原创已于 2025-06-27 11:13:23 修改 · 948 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-19 14:02:05 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3悬停文字边框动画特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a2e;
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.container {
text-align: center;
}

.hover-text {
position: relative;
display: inline-block;
font-size: 4rem;
color: transparent;
-webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff;
margin: 20px;
padding: 10px 30px;
cursor: pointer;
transition: all 0.3s ease;
}

/* 边框动画效果 */
.hover-text::before,
.hover-text::after {
content: '';
position: absolute;
width: 0;
height: 0;
opacity: 0;
transition: all 0.5s ease;
box-sizing: border-box;
}

/* 上边框 */
.hover-text::before {
top: 0;
left: 0;
border-top: 2px solid #00f5d4;
border-right: 2px solid #00f5d4;
}

/* 下边框 */
.hover-text::after {
bottom: 0;
right: 0;
border-bottom: 2px solid #ff0a54;
border-left: 2px solid #ff0a54;
}

/* 悬停效果 */
.hover-text:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.hover-text:hover::before,
.hover-text:hover::after {
width: 100%;
height: 100%;
opacity: 1;
}

/* 不同方向的动画效果 */
.effect-1:hover::before {
transition-delay: 0s;
}

.effect-1:hover::after {
transition-delay: 0.2s;
}

.effect-2:hover::before {
transition-delay: 0.4s;
}

.effect-2:hover::after {
transition-delay: 0.6s;
}

.effect-3:hover::before {
transition-delay: 0.8s;
}

.effect-3:hover::after {
transition-delay: 1s;
}

/* 背景装饰元素 */
.bg-element {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(0, 245, 212, 0.1);
filter: blur(30px);
z-index: -1;
animation: float 15s infinite ease-in-out;
}

.bg-element:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}

.bg-element:nth-child(2) {
top: 60%;
left: 70%;
animation-delay: 3s;
}

.bg-element:nth-child(3) {
top: 30%;
left: 50%;
animation-delay: 6s;
}

.bg-element:nth-child(4) {
top: 70%;
left: 20%;
animation-delay: 9s;
}

@keyframes float {
0%, 100% {
transform: translate(0, 0);
}
25% {
transform: translate(50px, 50px);
}
50% {
transform: translate(0, 100px);
}
75% {
transform: translate(-50px, 50px);
}
}

/* 版权信息 */
.footer {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}

.footer a {
color: #00f5d4;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1 class="hover-text effect-1">悬停效果</h1>
<h1 class="hover-text effect-2">CSS3动画</h1>
<h1 class="hover-text effect-3">边框特效</h1>


<div class="bg-element"></div>
<div class="bg-element"></div>
<div class="bg-element"></div>
<div class="bg-element"></div>
</div>

</body>
</html>