gsap+svg实现页面切换过度动画效果代码-html代码-BFW代码库

gsap+svg实现页面切换过度动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现页面切换过度动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap");
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  font-size: 15px;
}

html,
body {
  margin: 0;
  padding: 0;
  --color-text: #000;
  --color-bg-view-1: #9da0dd;
  --color-bg-view-2: #6a6468;
  --color-link: #000;
  --color-link-hover: #000;
  --color-button: #000;
  --color-button-hover: #22267d;
  color: var(--color-text);
  background-color: var(--color-bg-view-1);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
}

.wrapper {
  overflow-y: auto;
  height: 100vh;
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

a:hover {
  color: var(--color-link-hover);
  outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
  outline: none;
  background: lightgrey;
}

a:focus:not(:focus-visible) {
  background: transparent;
}

a:focus-visible {
  outline: 2px solid #fff;
  background: transparent;
}

.unbutton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.unbutton:focus {
  outline: none;
}

main {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100vh;
}
@media (max-width: 576px) {
  main {
    grid-auto-rows: min-content;
    grid-template-rows: auto;
  }
}

.button {
  color: var(--color-button);
  border-radius: 30px;
  min-width: 150px;
  padding: 1rem 2rem;
  border: 1px solid currentColor;
}

.button:hover,
.button:focus-visible {
  color: var(--color-button-hover);
}

.frame--view-open .button-open {
  opacity: 0;
  pointer-events: none;
}

.view {
  position: relative;
  grid-area: 1/1/2/2;
  display: grid;
  place-items: center;
}

.view--1 {
  display: flex;
  justify-content: space-around;
}

.view--1 p {
  text-align: left;
  margin-bottom: 30px;
}

.view--2 {
  background: var(--color-bg-view-2);
  pointer-events: none;
  opacity: 0;
}

.view.view--open {
  pointer-events: auto;
  opacity: 1;
}

.overlay {
  grid-area: 1/1/2/2;
  position: relative;
  z-index: 1000;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

h1 {
  font-family: "Bowlby One SC", sans-serif;
  font-weight: 400;
  font-size: 80px;
  margin-bottom: 0;
  position: relative;
}

p {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
}
@media (max-width: 576px) {
  p {
    max-width: 300px;
  }
}

img {
  position: absolute;
  max-width: 100%;
  height: 200px;
  top: 0;
  z-index: -1;
  right: 500px;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}
</style>


  
  
</head>

<body translate="no">
  <div class="wrapper">
    <main>
        <div class="view view--1">
            <div>
                <h1>Epsilon</h1>
                <p>Epsilon is the fifth planet orbiting in the habitable zone of star Zeta1 Reticuli in the Zeta Reticuli System. It possesses rings, similar to the planet Saturn. these rings are theorized to be the remains of a destroyed moon that was broken apart by the gravitational shift forced by asteroid Indus when it was captured by the gravity of Epsilon 50 million years ago. Its most notable features are its three large moons, including Epirus, which is home to a very aggressive carnivore designated Xeno Rex.</p>
                <button class="unbutton button button--open" aria-label="Open other view">Next Page</button>
            </div>
        </div&.........完整代码请登录后点击上方下载按钮下载查看