335 lines
3.9 KiB
Plaintext
335 lines
3.9 KiB
Plaintext
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
|
||
<style>
|
||
|
||
.gsap-transition-container {
|
||
|
||
width: 450px;
|
||
|
||
margin: 50px auto;
|
||
|
||
padding: 50px;
|
||
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
|
||
border-radius: 24px;
|
||
|
||
color: white;
|
||
|
||
text-align: center;
|
||
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||
|
||
overflow: hidden;
|
||
|
||
}
|
||
|
||
.text-box {
|
||
|
||
font-size: 2.8rem;
|
||
|
||
font-weight: 900;
|
||
|
||
height: 100px;
|
||
|
||
position: relative;
|
||
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.text-slide {
|
||
|
||
position: absolute;
|
||
|
||
width: 100%;
|
||
|
||
text-align: center;
|
||
|
||
will-change: transform, filter, opacity;
|
||
|
||
}
|
||
|
||
.demo-controls {
|
||
|
||
margin-top: 40px;
|
||
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.demo-button {
|
||
|
||
padding: 15px 40px;
|
||
|
||
font-size: 1.1rem;
|
||
|
||
font-weight: bold;
|
||
|
||
background: rgba(255, 255, 255, 0.2);
|
||
|
||
color: white;
|
||
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
||
border-radius: 12px;
|
||
|
||
cursor: pointer;
|
||
|
||
transition: all 0.3s ease;
|
||
|
||
backdrop-filter: blur(10px);
|
||
|
||
}
|
||
|
||
.demo-button:hover {
|
||
|
||
background: rgba(255, 255, 255, 0.3);
|
||
|
||
border-color: rgba(255, 255, 255, 0.5);
|
||
|
||
transform: translateY(-3px);
|
||
|
||
}
|
||
|
||
.demo-button:active {
|
||
|
||
transform: translateY(0);
|
||
|
||
}
|
||
|
||
.instructions {
|
||
|
||
margin-top: 20px;
|
||
|
||
color: rgba(255, 255, 255, 0.7);
|
||
|
||
font-size: 0.9rem;
|
||
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="gsap-transition-container">
|
||
|
||
<div class="text-box">
|
||
|
||
<div class="text-slide" id="currentText">First Message</div>
|
||
|
||
<div class="text-slide" id="nextText" style="opacity: 0;"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="demo-controls">
|
||
|
||
<button class="demo-button" onclick="performTransition()">执行过渡动画</button>
|
||
|
||
<p class="instructions">点击按钮查看横向缩小→文字切换→展开恢复的效果</p>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
|
||
const messages = [
|
||
|
||
"Hello World!",
|
||
|
||
"Welcome Back!",
|
||
|
||
"Amazing Work!",
|
||
|
||
"Great Success!",
|
||
|
||
"Excellent Job!",
|
||
|
||
"Fantastic!"
|
||
|
||
];
|
||
|
||
let currentIndex = 0;
|
||
|
||
let isAnimating = false;
|
||
|
||
function getNextMessage() {
|
||
|
||
currentIndex = (currentIndex + 1) % messages.length;
|
||
|
||
return messages[currentIndex];
|
||
|
||
}
|
||
|
||
function performTransition() {
|
||
|
||
if (isAnimating) return;
|
||
|
||
|
||
|
||
isAnimating = true;
|
||
|
||
|
||
|
||
const container = document.querySelector('.gsap-transition-container');
|
||
|
||
const currentText = document.getElementById('currentText');
|
||
|
||
const nextText = document.getElementById('nextText');
|
||
|
||
|
||
|
||
// 设置新文字
|
||
|
||
nextText.textContent = getNextMessage();
|
||
|
||
|
||
|
||
// 创建时间线
|
||
|
||
const tl = gsap.timeline({
|
||
|
||
onComplete: () => {
|
||
|
||
isAnimating = false;
|
||
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
// 阶段1：容器缩小 + 模糊
|
||
|
||
tl.to(container, {
|
||
|
||
scaleX: 0.66,
|
||
|
||
filter: "blur(8px)",
|
||
|
||
duration: 0.6,
|
||
|
||
ease: "power2.out"
|
||
|
||
})
|
||
|
||
|
||
|
||
// 阶段2：当前文字淡出 + 缩小 + 模糊
|
||
|
||
.to(currentText, {
|
||
|
||
opacity: 0,
|
||
|
||
scale: 0.8,
|
||
|
||
filter: "blur(12px)",
|
||
|
||
duration: 0.4,
|
||
|
||
ease: "power2.in"
|
||
|
||
}, "-=0.2") // 与前一动画重叠0.2秒
|
||
|
||
|
||
|
||
// 阶段3：新文字淡入（仍处于缩小状态）
|
||
|
||
.set(nextText, {
|
||
|
||
opacity: 0,
|
||
|
||
scale: 1.2,
|
||
|
||
filter: "blur(10px)"
|
||
|
||
})
|
||
|
||
.to(nextText, {
|
||
|
||
opacity: 1,
|
||
|
||
scale: 1,
|
||
|
||
filter: "blur(0)",
|
||
|
||
duration: 0.5,
|
||
|
||
ease: "power2.out"
|
||
|
||
})
|
||
|
||
|
||
|
||
// 阶段4：容器展开恢复 + 移除模糊
|
||
|
||
.to(container, {
|
||
|
||
scaleX: 1,
|
||
|
||
filter: "blur(0)",
|
||
|
||
duration: 0.7,
|
||
|
||
ease: "elastic.out(1, 0.5)" // 弹性效果
|
||
|
||
}, "-=0.3")
|
||
|
||
|
||
|
||
// 阶段5：重置（交换文字）
|
||
|
||
.add(() => {
|
||
|
||
currentText.textContent = nextText.textContent;
|
||
|
||
currentText.style.opacity = 1;
|
||
|
||
currentText.style.filter = "blur(0)";
|
||
|
||
currentText.style.transform = "scale(1)";
|
||
|
||
nextText.style.opacity = 0;
|
||
|
||
});
|
||
|
||
}
|
||
|
||
// 自动演示
|
||
|
||
setTimeout(() => {
|
||
|
||
performTransition();
|
||
|
||
}, 1500);
|
||
|
||
// 每5秒自动切换
|
||
|
||
setInterval(() => {
|
||
|
||
if (!isAnimating) {
|
||
|
||
performTransition();
|
||
|
||
}
|
||
|
||
}, 5000);
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |