152 lines
4.9 KiB
HTML
152 lines
4.9 KiB
HTML
<!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, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
|
|
.bubble-tag {
|
|
position: absolute;
|
|
padding: 8px 18px;
|
|
border-radius: 25px;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
user-select: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.bubble-tag:hover {
|
|
transform: scale(1.15);
|
|
z-index: 10;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 气泡浮动动画 */
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0) translateX(0) rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: translateY(-15px) translateX(10px) rotate(1deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-30px) translateX(5px) rotate(0deg);
|
|
}
|
|
75% {
|
|
transform: translateY(-15px) translateX(-10px) rotate(-1deg);
|
|
}
|
|
}
|
|
|
|
/* 呼吸效果动画 */
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 0.8;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: white;
|
|
font-size: 24px;
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="title">标签气泡动效演示</h1>
|
|
<div class="container" id="bubbleContainer"></div>
|
|
|
|
<script>
|
|
// 标签数据
|
|
const tags = [
|
|
"前端开发", "JavaScript", "CSS动画", "HTML5",
|
|
"React", "Vue", "TypeScript", "Node.js",
|
|
"UI设计", "用户体验", "响应式布局", "性能优化",
|
|
"微信小程序", "PWA", "Canvas", "SVG",
|
|
"WebGL", "数据可视化", "模块化", "组件化"
|
|
];
|
|
|
|
// 获取容器
|
|
const container = document.getElementById('bubbleContainer');
|
|
const containerWidth = container.offsetWidth;
|
|
const containerHeight = container.offsetHeight;
|
|
|
|
// 创建标签并添加动画
|
|
tags.forEach((tagText, index) => {
|
|
// 创建标签元素
|
|
const tag = document.createElement('div');
|
|
tag.className = 'bubble-tag';
|
|
tag.textContent = tagText;
|
|
|
|
// 随机位置
|
|
const randomX = Math.random() * (containerWidth - 120);
|
|
const randomY = Math.random() * (containerHeight - 50);
|
|
tag.style.left = `${randomX}px`;
|
|
tag.style.top = `${randomY}px`;
|
|
|
|
// 随机大小
|
|
const randomSize = 0.8 + Math.random() * 0.4;
|
|
tag.style.transform = `scale(${randomSize})`;
|
|
|
|
// 随机动画延迟
|
|
const delay = Math.random() * 5;
|
|
tag.style.animationDelay = `${delay}s`;
|
|
|
|
// 随机动画持续时间
|
|
const duration = 8 + Math.random() * 8;
|
|
tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
|
|
|
|
// 随机背景色
|
|
const hue = 260 + Math.random() * 40; // 紫色调范围
|
|
const lightness = 90 + Math.random() * 5;
|
|
tag.style.backgroundColor = `hsla(${hue}, 70%, ${lightness}%, 0.9)`;
|
|
|
|
// 添加到容器
|
|
container.appendChild(tag);
|
|
|
|
// 添加点击效果
|
|
tag.addEventListener('click', () => {
|
|
tag.style.animation = 'none';
|
|
tag.style.transform = 'scale(1.3)';
|
|
setTimeout(() => {
|
|
tag.style.animation = `float ${duration}s infinite ease-in-out, pulse 3s infinite alternate`;
|
|
tag.style.animationDelay = '0s';
|
|
}, 300);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|