【CSS练习】个人信息

学习内容：
Day7
链接地址
【description】Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.

代码实现：
html

<div class="container">
    <div class="main">
      <div class="infos">
        <div class="avator">
          <img src="./resources/1.png" alt="头像">
          <div class="circle-1"></div>
          <div class="circle-2"></div>
        </div>
        <div class="header">
          <div class="name">Jessica Potter</div>
          <div class="intro">visual artist</div>
        </div>
        <div class="selections">
          <button>Follow</button>
          <button>Message</button>
        </div>
      </div>
      <div class="metrics">
        <ul>
          <li>
            <div class="header">
              <div class="name">523</div>
              <div class="intro">Posts</div>
            </div>
          </li>
          <li>
            <div class="header">
              <div class="name">523</div>
              <div class="intro">Posts</div>
            </div>
          </li>
          <li>
            <div class="header">
              <div class="name">523</div>
              <div class="intro">Posts</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

less

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

#mixin-header() {
  @font-color: #7a6652;
  .name {
    font-size: 18px;
    color: @font-color;
    font-weight: 700;
  }
  .intro {
    font-size: 14px;
    color: gray;
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  // 容器高度撑满
  min-height:100vh;
  background-image: linear-gradient(to right, #ebb46d 0%, #cb8552 100%);
}

.main {
  @sub-container-width: 38%;
  @font-color: #7a6652;
  @sub-container-color: #f5e8df;

  background-color: #fff;
  width: 300px;
  height: 300px;
  .infos {
    float: left;
    width: calc(100% - @sub-container-width);
    height: 100%;
    padding: 25px;
    text-align: center;
    .avator {
      @img-size: 80px;
      @circle-gap: 6px;
      @border-color: #786450;

      position: relative;
      margin: 8px 0;

      img {
        width: @img-size;
        height: @img-size;
        border-radius: 50%;
      }

      each(range(2), {
        .circle-@{value} {
          position: absolute;
          top: -3px;
          left: 25px;
          width: @img-size + @circle-gap;
          height: @img-size + @circle-gap;
          border-radius: 50%;
          // background-color: pink;
          border: 1px solid;
          border-color: @border-color @border-color @border-color transparent;
          // 添加过渡效果，然后生效
          transition: all 1.5s ease-in-out; 
        }
      })

      .circle-2 {
        width: @img-size + @circle-gap * 2;
        height: @img-size + @circle-gap * 2;
        left: 22px;
        top: -6px;
        border-color: @border-color transparent @border-color @border-color;
      }

      &:hover {
        cursor: pointer;

        .circle-1 {
          transform: rotate(360deg);
        }

        .circle-2 {
          transform: rotate(-360deg);
        }
      }
    }
    .header {
      margin-bottom: 22px;
      .name {
        #mixin-header.name();
      }
      .intro {
        #mixin-header.intro();
      }
    }
    .selections {
      button {
        display: block;
        width: 100%;
        height: 37px;
        border-radius: 25px;
        outline: none;
        margin: 10px 0;
        background-color: #fff;
        font-weight: 700;
        border: 1px solid #786450;

        &:hover {
          background-color: #786450;
          color: #fff;
        }
      }
    }
  }
  .metrics {
    float: right;
    width: @sub-container-width;
    height: 100%;
    ul {
      display: flex;
      flex-direction: column;
      height: 100%;
      li {
        position: relative;
        height: 33%;
        margin-top: 2px;
        background-color: @sub-container-color;
        &:first-child {
          margin-top: 0;
        }
        .header {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          .name {
            #mixin-header.name();
          }
          .intro {
            #mixin-header.intro();
          }
        }

        &:hover {
          background-color: #e1cfc2;
        }
      }
    }
  }
}

效果图：