body {
  background-color: rgb(204, 212, 230);
  display: flex;
  justify-content: center;
}
.a {
  position: relative;
  width: 845px;
  height: 400px;
  border: #fff 10px solid;
  background-color: rgb(120, 140, 200);
  top: 120px;
  border-radius: 20px;
  box-shadow: 1px 1px 6px 4px rgb(255 241 184 / 60%);
  overflow: hidden;
}
.b {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 0;
  margin: 75px 50px;
  transition: 1s;
}
.b a {
  text-decoration: none;
  color: #fff;
  font: 900 28px '';
}
.b h2 {
  /* 鼠标放开时的动画，第一个值是动画的过渡时间
  第二个只是延迟一秒后执行 */
  transition: 0.5s 1s;
  opacity: 0;
  color: rgb(255, 197, 61);
}
.b span {
  transition: 0.5s 1s;
  color: #fff;
  font: 500 15px '';
  position: absolute;
  top: 70px;
}
.c {
  position: absolute;
  top: -130px;
  right: -240px;
}
.d,
.e {
  position: absolute;
  right: calc(var(--i) * 100px);
  width: calc(var(--w) * 40px);
  height: 500px;
  overflow: hidden;
  border-radius: 100px;
  transform: rotateZ(220deg) translate(0, 0);
  background: rgb(240, 220, 150);
  transition: 0.5s 0.5s;
}
.d:nth-child(2) {
  background: rgb(240, 190, 230);
}
.e {
  left: -470px;
  top: -140px;
  width: 70px;
  background-color: rgb(90, 220, 150);
}
.a:hover .c div {
  transition: 0.5s calc(var(--i) * 0.1s);
  transform: rotateZ(220deg) translate(-200px, 400px);
}
.a:hover .b {
  transition: 1s 0.5s;
  left: 370px;
}
.a:hover .b a {
  transition: 1s 0.5s;
  color: rgb(173, 198, 255);
}
.a:hover .b span {
  transition: 1s 0.5s;
  top: 105px;
}
.a:hover .b h2 {
  transition: 1s 0.5s;
  opacity: 1;
}
.f {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: absolute;
  background-image: url(/motion_card/assets/16d1c78c829a6b348df5d690e96b052e26e997b1.jpg);
  background-size: cover;
  margin: 70px;
  box-shadow: 1px 1px 6px 4px rgb(255 255 255 / 60%);
  opacity: 0;
  transition: 0.5s;
}
.a:hover .f {
  transition: 1s 1.3s;
  opacity: 1;
}
.preLoad * {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}