CSS3创意精美页面过渡动画效果

原创已于 2025-06-27 13:23:19 修改 · 755 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-09 16:54:30 首次发布

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Creative Page Transition Animation</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

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

.page-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.page {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
transition: transform 1s ease-in-out;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.page h1 {
font-size: 3rem;
margin-bottom: 20px;
color: #3498db;
}

.page p {
font-size: 1.2rem;
max-width: 600px;
text-align: center;
margin-bottom: 30px;
line-height: 1.6;
}

.btn {
padding: 12px 30px;
background: #3498db;
color: white;
border: none;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn:hover {
background: #2980b9;
transform: translateY(-3px);
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

/* Page transition animations */
.page:nth-child(1) {
z-index: 3;
transform: translateX(0);
}

.page:nth-child(2) {
z-index: 2;
transform: translateX(100%);
background: #f1c40f;
}

.page:nth-child(3) {
z-index: 1;
transform: translateX(200%);
background: #2ecc71;
}

/* Animation classes */
.slide-out {
transform: translateX(-100%) rotateY(30deg) scale(0.9);
opacity: 0.8;
}

.slide-in {
transform: translateX(0) rotateY(0) scale(1);
}

.slide-next {
transform: translateX(100%) rotateY(-30deg) scale(0.9);
opacity: 0.8;
}

/* Shape animations */
.shape {
position: absolute;
opacity: 0.1;
z-index: 0;
}

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: #3498db;
animation: float 8s infinite ease-in-out;
}

.triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid #e74c3c;
animation: float 10s infinite ease-in-out reverse;
}

.square {
width: 150px;
height: 150px;
background: #9b59b6;
animation: float 12s infinite ease-in-out;
}

@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-50px) rotate(10deg);
}
}
</style>
</head>
<body>
<div class="page-container">

<div class="shape circle" style="top: 20%; left: 10%;"></div>
<div class="shape triangle" style="top: 60%; left: 80%;"></div>
<div class="shape square" style="top: 30%; left: 70%;"></div>
<div class="shape circle" style="top: 70%; left: 20%; width: 100px; height: 100px;"></div>


<div class="page" id="page1">
<h1>Welcome</h1>
<p>Experience this beautiful CSS3 page transition animation. Click the button below to see the magic happen!</p>
<a href="#" class="btn" onclick="nextPage()">Next Page</a>


</div>


<div class="page" id="page2">
<h1>Amazing Effects</h1>
<p>This transition uses CSS3 transforms and animations to create a smooth, visually appealing experience between pages.</p>
<a href="#" class="btn" onclick="nextPage()">Next Page</a>
</div>


<div class="page" id="page3">
<h1>All Done!</h1>
<p>You've seen all the pages in this demo. Click the button to start over and see the animations again.</p>
<a href="#" class="btn" onclick="resetPages()">Start Over</a>
</div>
</div>