react布局更换动画过渡效果-html代码-BFW代码库

react布局更换动画过渡效果

代码语言：html

代码描述：react布局更换动画过渡效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  padding: 80px 20px 20px;
  font-family: sans-serif;
}

.wrapper {
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-auto-rows: 60px;
  gap: 5px;
  margin: 20px auto;
}

.wrapper--layout-1 {
  grid-template-areas: "a a a a" "b c c c" "d d e e" "f g g g";
}

.wrapper--layout-2 {
  grid-template-areas: "c c b" "g a a" "d d e" "f f e";
  grid-auto-rows: auto;
  grid-gap: 15px;
}
.wrapper--layout-2 .area {
  height: 80px;
}

.wrapper--layout-3 {
  grid-template-areas: "a a b c c" "d d d c c" "e f g g g";
  grid-gap: 0;
}
.wrapper--layout-3 .area {
  border-radius: 0;
}

.wrapper--layout-4 {
  grid-template-areas: "a b" "c d" "e f" "g g";
}

.area {
  border-radius: 10px;
}

.a {
  background: #F2C249;
  grid-area: a;
}

.b {
  background: #E6772E;
  grid-area: b;
}

.c {
  background: #4DB3B3;
  grid-area: c;
}

.d {
  background: #E64A45;
  grid-area: d;
}

.e {
  background: #3D4C53;
  grid-area: e;
}

.f {
  background: #ff9ed2;
  grid-area: f;
}

.g {
  background: #64a8d3;
  grid-area: g;
}

.buttons {
  display: grid;
  -webkit-box-pack: center;
          justify-content: center;
  grid-auto-flow: column;
}

button {
  background: none;
  border: 2px solid #444;
  font: inherit;
  font-size: 20px;
  width: 40px;
  heig.........完整代码请登录后点击上方下载按钮下载查看