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>
|