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

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

代码语言：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;
  .........完整代码请登录后点击上方下载按钮下载查看