/* pages/life/life.wxss */
.container-life{
  position: relative;
  width: 100vw;
  height:100vh;
  color:#ff00aa;
  background: #fff;  /* fallback for old browsers */
  overflow: hidden;
  animation-name:backdiv;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
.container-box{
  position: relative;
  width: 100vw;
  height:100vh;
}

.loading{
  position: absolute;
  width: 100px;
  height: 100px;
  perspective: 780px;
  position: relative;
  top:25%;
  left:50%;
  transform: translate(-50%,-25%);
}

.gril-friend{
  position: relative;
  padding:20px;
  height: 100%;
}
.gril-friend-header{
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 25%;
}
.gril-friend-content{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  text-align: center;
  font-size: 16px;
  color: #ff00aa;
  /* animation-name:heart-font;
  animation-duration: 6s;
  z-index:1;
  animation-iteration-count: infinite; */
}
.gril-friend-bottom{
  position: absolute;
  display: flex;
  height: 25%;
  justify-content: space-between;
  width: 100vw;
  bottom: 0;
}
.gril-friend-left{
  position: relative;
  text-align: left;
}
.container-life-right{
  position: relative;
 
  padding-right:20px;
}
.container-life-right-font{
  margin-right: 40px;
}
.box{
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.heart{
  width:200px;
  height:200px;

  background: pink;
  transform: rotate(45deg);
  /* animation-name:change;
  animation-duration: 6s;
  animation-iteration-count: infinite; */
}
/* 伪类创建 */
.heart::before{
  content:'';
  width:200px;
  height:200px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  /* 定位 */
  transform: translateX(-100px);
}
.heart::after{
  content:'';
  width:200px;
  height:200px;
  background: pink;
  border-radius: 50%;
  position: absolute;
  /* 定位 */
  transform: translateY(-100px);
  /* transform: translateX(-100px); */
}
@keyframes change{
  0%{
    transform: rotate(45deg) scale(0.5);
  }
  50%{
    transform: rotate(45deg) scale(0.8);
  }
  100%{
    transform: rotate(45deg) scale(0.5);
  }
}
@keyframes backdiv {
  50% {
    background: #ffe6f2;
  }
}
@keyframes heart-font{
  0%{
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%) scale(0.5);
  }
  50%{
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%) scale(0.8);
  }
  100%{
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%) scale(0.5);
  }
}