/* pages/life/life.wxss */
.container-life{
  position: relative;
  width: 100vw;
  height:calc(100vh - 60px);
  /* color:#ff00aa; */
  background: #fff;  /* fallback for old browsers */
  overflow: hidden;
  /* animation-name:backdiv;
  animation-duration: 6s;
  animation-iteration-count: infinite; */
  box-sizing: border-box;
}
.container-header {
    background: rgba(16, 116, 187);
    width: 100%;
    text-align: center;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
  }
.container-box{
  position: relative;
  width: 100vw;
  height: calc(100vh - 100px);
  overflow: auto;
  user-select: text;
}
.blog-container{
  width: 100vw;
  overflow: auto;
}

.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);
  }
}