鼠标小星星拖尾特效

ziblog

已于 2025-06-27 13:28:41 修改

阅读量913

点赞数 5

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2025-06-06 16:41:52 首次发布

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

<!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 {
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-family: 'Arial', sans-serif;
overflow: hidden;
position: relative;
}

.header {
text-align: center;
padding: 30px;
z-index: 10;
max-width: 800px;
}

h1 {
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
background: linear-gradient(to right, #ffd700, #ffa500, #ff8c00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glow 2s infinite alternate;
}

.subtitle {
font-size: 1.5rem;
margin-bottom: 30px;
color: #e0e0ff;
}

.content {
background: rgba(10, 15, 35, 0.7);
border-radius: 15px;
padding: 25px;
margin: 20px;
max-width: 600px;
z-index: 10;
box-shadow: 0 0 30px rgba(0, 100, 255, 0.3);
backdrop-filter: blur(5px);
border: 1px solid rgba(100, 150, 255, 0.3);
}

p {
margin: 15px 0;
line-height: 1.6;
}

.feature-list {
margin: 20px 0;
padding-left: 25px;
}

.feature-list li {
margin: 10px 0;
position: relative;
}

.feature-list li:before {
content: '✦';
color: #ffd700;
position: absolute;
left: -25px;
}

.link-container {
margin-top: 20px;
text-align: center;
}

.main-link {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(to right, #ff8c00, #ffd700);
color: #1a1a2e;
text-decoration: none;
font-weight: bold;
border-radius: 50px;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
}

.main-link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.6);
}

.footer {
margin-top: 40px;
text-align: center;
color: #a0a0ff;
font-size: 0.9rem;
z-index: 10;
}

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

.footer a:hover {
text-decoration: underline;
}

/* 星星样式 */
.star {
position: absolute;
pointer-events: none;
z-index: 1;
font-size: 24px;
opacity: 0;
transition: opacity 0.3s, transform 0.5s;
}

/* 动画效果 */
@keyframes float {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}

@keyframes glow {
0% {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
100% {
text-shadow: 0 0 20px rgba(255, 215, 0, 0.9),
0 0 30px rgba(255, 140, 0, 0.6);
}
}

/* 背景装饰 */
.bg-star {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
animation: twinkle 4s infinite;
z-index: 0;
}

@keyframes twinkle {
0%, 100% {
opacity: 0.2;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="header">
<h1>鼠标小星星拖尾特效</h1>
<p class="subtitle">移动鼠标查看炫酷的星星拖尾效果</p>
</div>

<div class="content">
<p>这个页面展示了一个精美的鼠标拖尾特效。当您移动鼠标时，一串闪烁的小星星会跟随您的光标，形成梦幻般的拖尾效果。</p>

<ul class="feature-list">
<li>彩色小星星随机生成，每个星星都有独特的颜色</li>
<li>星星拖尾长度可自定义，形成流畅的跟随效果</li>
<li>星星大小随机变化，增加视觉效果</li>
<li>平滑的淡出动画，营造梦幻氛围</li>
<li>响应式设计，在各种设备上都能完美展示</li>
</ul>

<div class="link-container">

</div>
</div>

<div class="footer">
<p>特效使用纯HTML/CSS/JavaScript实现 | 更多精彩内容请访问:

</p>
</div>