js+css实现春夏秋冬季节变换切换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现春夏秋冬季节变换切换动画效果代码

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

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

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

  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.season,
.background,
.middleground,
.foreground {
  position: absolute;
}

.season {
  width: 500px;
  height: 350px;
  border-radius: 30px;
  margin-bottom: 100px;
}

/* -- Spring -- */

#spring {
  background: linear-gradient(#4ad4ff, #fff);
  opacity: 0;
}

#spring > .background {
  scale: 0;

  top: 182px;
  left: -30px;
}

#spring > .middleground {
  scale: 0;

  top: 66px;
  left: -39px;
}

#spring > .foreground {
  scale: 0;

  top: -10px;
  left: 46px;
}

/* -- Summer -- */

#summer {
  background: linear-gradient(#0694fb, #e7f2fb);
  opacity: 0;
}

#summer > .background {
  scale: 0;

  top: 217px;
  left: -87px;
}

#summer > .middleground {
  scale: 0;

  top: 133px;
  left: 58px;
}

#summer > .foreground {
  scale: 0;

  top: -42px;
  left: -134px;
}

/* -- Autumn -- */

#autumn {
  background: linear-gradient(#f3ba89, #f9eca9);
  opacity: 0;
}

#autumn > .background {
  scale: 0;

  top: 152px;
  left: 16px;
}

#autumn > .middleground {
  scale: 0;

  top: 78px;
  left: -44px;
}

#autumn > .foreground {
  scale: 0;

  top: -35px;
  left: 47px;
}

/* -- Winter -- */

#winter {
  background: linear-gradient(#a2b6c0, #ecdcbc);
  opacity: 0;
}

#winter > .background {
  scale: 0;

  top: 164px;
  left: -35px;
}

#winter > .middleground {
  scale: 0;

  top: 105px;
  left: 66px;
}

#winter > .foreground {
  scale: 0;

  top: 39px;
  left: -118px;
}

/* -- Menu -- */

#menu-button {
  position: absolute;
  width: 110px;
  height: 50px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 50;
  transition: 200ms ease;
}

#menu-button:hover {
  color: black;
  background: white;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

#menu-button:active {
  color: white;
  background: black;
  scale: 0.9;
}

#menu-season {
  position: absolute;
  padding: 6px;
  bottom: 60px;
  border-radius: 10px;
  gap: 4px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: black;
  scale: 0;
}

#menu-season > button {
  width: 70px;
  height: 30px;
  border-radius: 5px;
  border: none;
  background: transparent;
  font-weight: bold;
  color: white;
  transition: 400ms ease;
  cursor: pointer;
}

#menu-season > button:active,
#menu-season > .selected {
  background: white;
  color: black;
}
</style>


  
  
</head>

<body>
  <section id="spring" class="season">
  <img class="background" src="//repo.bfw.wiki/bfwrepo/svg/season/spring-background.svg" alt="Spring background" />
  <img class="middleground" src="//repo.bfw.wiki/bfwrepo/svg/season/spring-middleground.svg" alt="Spring middleground" />
  <img class="foreground" src="//repo.bfw.wiki/bfwrepo/svg/season/spring-foreground.svg" alt="Spring foreground" />
</section>

<section id="autumn" class="season">
  <img class="background" src="//repo.bfw.wiki/bfwrepo/svg/season/autumn-background.svg" alt="Autumn background" />
  <img class="middleground" src="//repo.bfw.wiki/bfwrepo/svg/season/autumn-middleground.svg" alt="Autumn middleground" />
  <img class="foreground" src="//repo.bfw.wiki/bfwrepo/svg/season/autumn-foreground.svg" alt="Autumn foreground" />
</section>

<section id="winter" class="season">
  <img class="background" src="//repo.bfw.wiki/bfwrepo/svg/season/winter-background.svg" alt="Winter background" />
  <img class="middleground" src="//repo.bfw.wiki/bfwrepo/svg/season/winter-middleground.svg" alt="Winter middleground" />
  <img class="foreground" src="//repo.bfw.wiki/bfwrepo/svg/season/winter-foreground.svg" alt="Winter foreground" />
</section>

<section id="summer" class="season">
  <img class="background" src="//repo.bfw.wiki/bfwrepo/svg/season/summer-background.svg" alt="Summer background" />
  <img class="middleground" src="//repo.bfw.wiki/bfwrepo/svg/season/summer-middleground.svg" alt="Summer middleground" />
  <img class="foreground" src="//repo.bfw.wiki/bfwrepo/svg/season/summer-foreground.svg" alt="Summer foreground" />
</section>

<button id="menu-button">
  <span></span>
</button>

<div id="menu-season">
  <button id="spring-btn">Spring</button>
  <button id="summer-btn">Summer</button>
  <button id="autumn-btn">Autumn</button>
  <button id="winter-btn">Winter</button>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrep.........完整代码请登录后点击上方下载按钮下载查看