幽灵文字特效_jquery实现数字滚动特效-优快云博客

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幽灵文字特效</title>
<style>
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}

.ghost-text {
position: relative;
font-size: 5rem;
color: rgba(0, 255, 255, 0.7);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
animation: float 3s ease-in-out infinite;
}

.ghost-text::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: rgba(255, 0, 255, 0.3);
z-index: -1;
filter: blur(15px);
animation: float-reverse 3s ease-in-out infinite;
}

.ghost-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: rgba(0, 255, 0, 0.3);
z-index: -2;
filter: blur(30px);
animation: float 4s ease-in-out infinite;
}

@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-20px) translateX(10px);
}
}

@keyframes float-reverse {
0%, 100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(15px) translateX(-5px);
}
}

.hidden-link {
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(255, 255, 255, 0.1);
font-size: 0.8rem;
text-decoration: none;
}
</style>
</head>
<body>
<div class="ghost-text" data-text="幽灵文字">幽灵文字</div>
<a href="http://www.9pk.homes" class="hidden-link">http://www.9pk.homes</a>
</body>
</html>