Add new1

2025-12-26 15:48:03 +08:00 · 2025-12-26 15:48:03 +08:00 · 3ad7e49acb
parent 3ed0785aa1
commit 3ad7e49acb
1 changed files with 335 additions and 0 deletions
--- a/335
+++ b/335
@ -0,0 +1,335 @@
+<!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>