Update wave
This commit is contained in:
parent
f262b771e6
commit
3ed0785aa1
198
wave
198
wave
|
|
@ -218,4 +218,202 @@
|
|||
|
||||
</body>
|
||||
|
||||
</html<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.text-transition-container {
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
color: white;
|
||||
margin: 50px auto;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 文字切换动画 */
|
||||
@keyframes textSwap {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 第一阶段：缩小+模糊 */
|
||||
40% {
|
||||
transform: scaleX(0.66);
|
||||
filter: blur(4px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 保持缩小状态，准备切换文字 */
|
||||
45% {
|
||||
transform: scaleX(0.66);
|
||||
filter: blur(4px);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* 文字切换的瞬间（透明度最低） */
|
||||
50% {
|
||||
transform: scaleX(0.66);
|
||||
filter: blur(4px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 新文字出现（仍然缩小） */
|
||||
55% {
|
||||
transform: scaleX(0.66);
|
||||
filter: blur(4px);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* 第二阶段：展开+清晰 */
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 应用动画 */
|
||||
.animate-swap {
|
||||
animation: textSwap 2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* 文字容器 - 用于切换 */
|
||||
.text-wrapper {
|
||||
position: relative;
|
||||
height: 60px; /* 固定高度防止跳动 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-item {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.text-item.original {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.text-item.new {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 动画时切换文字 */
|
||||
.animate-swap .text-item.original {
|
||||
animation: fadeOutSwap 2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.animate-swap .text-item.new {
|
||||
animation: fadeInSwap 2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeOutSwap {
|
||||
0% { opacity: 1; }
|
||||
45% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fadeInSwap {
|
||||
0% { opacity: 0; }
|
||||
45% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.trigger-button {
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
padding: 12px 30px;
|
||||
font-size: 1rem;
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.trigger-button:hover {
|
||||
background: #4338ca;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="text-transition-container">
|
||||
<div class="text-content">
|
||||
<div class="text-wrapper">
|
||||
<div class="text-item original" id="text1">Hello World</div>
|
||||
<div class="text-item new" id="text2">Welcome Back</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="trigger-button" onclick="startTransition()">切换文字</button>
|
||||
|
||||
<script>
|
||||
let isAnimating = false;
|
||||
let currentText = 'original';
|
||||
|
||||
function startTransition() {
|
||||
if (isAnimating) return;
|
||||
|
||||
const textContent = document.querySelector('.text-content');
|
||||
const text1 = document.getElementById('text1');
|
||||
const text2 = document.getElementById('text2');
|
||||
|
||||
isAnimating = true;
|
||||
|
||||
// 添加动画类
|
||||
textContent.classList.add('animate-swap');
|
||||
|
||||
// 设置文字内容（可以动态变化）
|
||||
if (currentText === 'original') {
|
||||
text2.textContent = getRandomText();
|
||||
currentText = 'new';
|
||||
} else {
|
||||
text1.textContent = getRandomText();
|
||||
currentText = 'original';
|
||||
}
|
||||
|
||||
// 动画结束后重置状态
|
||||
setTimeout(() => {
|
||||
textContent.classList.remove('animate-swap');
|
||||
isAnimating = false;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function getRandomText() {
|
||||
const texts = [
|
||||
'Amazing!',
|
||||
'Great Job!',
|
||||
'Excellent!',
|
||||
'Well Done!',
|
||||
'Fantastic!',
|
||||
'Impressive!'
|
||||
];
|
||||
return texts[Math.floor(Math.random() * texts.length)];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue