APP页面转换动画-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148978933

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APP页面转换动画</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: #f5f5f5;
overflow-x: hidden;
}

.app-container {
width: 100%;
max-width: 414px;
height: 736px;
margin: 20px auto;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
border-radius: 30px;
background: #fff;
}

.page {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.page h1 {
font-size: 28px;
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.page p {
font-size: 16px;
margin-bottom: 30px;
line-height: 1.6;
}

.btn {
padding: 12px 30px;
background: white;
color: #6e8efb;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.page-1 {
z-index: 10;
}

.page-2 {
transform: translateX(100%);
opacity: 0;
z-index: 5;
background: linear-gradient(135deg, #f093fb, #f5576c);
}

.page-3 {
transform: translateX(100%);
opacity: 0;
z-index: 1;
background: linear-gradient(135deg, #43e97b, #38f9d7);
}

/* 动画效果 */
.slide-out {
animation: slideOut 0.5s forwards;
}

.slide-in {
animation: slideIn 0.5s forwards;
}

@keyframes slideOut {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}

@keyframes slideIn {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

/* 其他动画效果 */
.fade-out {
animation: fadeOut 0.5s forwards;
}

.fade-in {
animation: fadeIn 0.5s forwards;
}

@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.rotate-out {
animation: rotateOut 0.5s forwards;
}

.rotate-in {
animation: rotateIn 0.5s forwards;
}

@keyframes rotateOut {
0% {
transform: rotateY(0deg);
opacity: 1;
}
100% {
transform: rotateY(90deg);
opacity: 0;
}
}

@keyframes rotateIn {
0% {
transform: rotateY(-90deg);
opacity: 0;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}

.logo {
width: 100px;
height: 100px;
margin-bottom: 30px;
background: rgba(255,255,255,0.2);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
</style>
</head>
<body>
<div class="app-container">
<div class="page page-1">
<div class="logo">1</div>
<h1>欢迎使用我们的APP</h1>
<p>体验前所未有的流畅操作和精美界面设计</p>
<button class="btn" onclick="nextPage('page-1', 'page-2', 'slide')">开始探索</button>
</div>

<div class="page page-2">
<div class="logo">2</div>
<h1>发现更多精彩功能</h1>
<p>我们的APP提供了多种实用功能，满足您的各种需求</p>
<button class="btn" onclick="nextPage('page-2', 'page-3', 'fade')">继续</button>
<button class="btn" style="margin-top: 15px;" onclick="nextPage('page-2', 'page-1', 'rotate')">返回</button>
</div>

<div class="page page-3">
<div class="logo">3</div>
<h1>个性化设置</h1>
<p>根据您的喜好定制专属界面和功能</p>
<button class="btn" onclick="nextPage('page-3', 'page-2', 'fade')">返回</button>
<p style="margin-top: 30px;">
<a href="https://a.88a.org.cn/HOkL" style="color: white; text-decoration: underline;">了解更多信息</a>
</p>
</div>
</div>