【CSS练习】Notification

学习内容：

Day7
链接地址
【description】Notifications, Search and Menu: The three cornerstones of any application? Brought together in the smallest possible space.

代码实现：
html

<div class="container">
    <div class="sub-main">
      <ul class="clearfix">
        <li>Dashboard</li>
        <li>Profile</li>
        <li>Notifications</li>
        <li>Messages</li>
        <li>Settings</li>
      </ul>
    </div>
    <div class="main">
      <div class="header">
        <div class="tools">
          <div class="line-1"></div>
          <div class="line-2"></div>
        </div>
        <div class="title">Notifications</div>
        <div class="label">
          <div></div>
        </div>
      </div>
      <div class="content">
        <div class="notifications">
          <div class="line"></div>
          <div class="notification">
            <div class="circle"></div>
            <div class="time">9:24 AM</div>
            <div class="intros">
              <div class="name"><b>John Walker</b> posted a photo on your wall</div>
            </div>
          </div>
          <div class="notification">
            <div class="circle"></div>
            <div class="time">9:24 AM</div>
            <div class="intros">
              <div class="name"><b>John Walker</b> posted a photo on your wall</div>
            </div>
          </div>
          <div class="notification">
            <div class="circle"></div>
            <div class="time">9:24 AM</div>
            <div class="intros">
              <div class="name"><b>John Walker</b> posted a photo on your wall</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

less

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

li {
  list-style: none;
}

.clearfix:after {/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 400px;
  height: 400px;
  background-color: #264057;
  overflow: hidden;
  transition: all 1.5s ease-in-out;
}

.mixin-font {
  font-size: 14px;
  color: #808080;
}

@main-size: 300px;

.sub-main {
  @sub-main-size: @main-size - 30px;
  @li-height: 50px;

  flex: 0;
  width: @sub-main-size;
  height: @sub-main-size;
  opacity: 0;
  background-color: #43627d;
  transform: translateX(60px);
  transition: all .5s ease-in-out;

  &.active {
    transform: translateX(40px);
    opacity: 1;
  }

  ul {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 0;

    li {
      @y-offset: 56px;
      @main-color: #93b2cd;
      display: block;
      height: @li-height;
      line-height: @li-height;
      width: 100%;
      text-align: left;
      padding-left: 40px;
      color: @main-color;

      &:hover {
        background-color: #385269;
        color: #fff;
      }

      &:last-child {
        margin-bottom: 10px;
      }

      each(range(5), {
        &:nth-child(@{value}):before {
          content: "";
          display: block;
          position: absolute;
          top: calc(@value * 26px + (@value - 1) * 24px);
          left: 18px;
          background-color: @main-color;
          width: 15px;
          height: 15px;
          border-radius: 50%;
        }
      })
    }
  }
}

.main {
  flex: 1;
  width: @main-size;
  height: @main-size;
  background-color: #fff;
  @header-size: 45px;
  z-index: 9999;
  transform: translateX(-60px);
  transition: all 1.5s ease-in-out;

  .header {
    @main-color: #b2daff;

    display: flex;
    justify-content: space-around;
    height: @header-size;
    padding: 10px 5px 14px 0;
    text-align: center;
    line-height: 27px;
    background-color: #5f98cd;
    
    .tools {
      flex-grow: 1.5;
      position: relative;

      each(range(2), {
        .line-@{value} {
          position: absolute;
          bottom: 1px;
          left: 50%;
          transform: translate(-50%, 0);
          width: 50%;
          height: 4px;
          background-color: @main-color;
          border-radius: 6px;
        }
      })
      .line-2 {
        background-color: @main-color;
        width: 32%;
        top: 6px;
        left: 42%;

        &::after {
          @cicle-size: 5px;

          content: '';
          display: block;
          position: absolute;
          top: 0px;
          right: -7px;
          width: @cicle-size;
          height: @cicle-size;
          background-color: @main-color;
          border-radius: 50%;
        }
      }

      &:hover {
        cursor: pointer;
      }
    }
    .title {
      flex-grow: 3;
      color: #fff;
      font-weight: 700;
    }
    .label {
      flex-grow: 1;
      > div {
        @label-size: 17px;

        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: @label-size;
        height: @label-size;
        border-radius: 50%;
        border: 4px solid @main-color;
        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 10px;
          left: 8px;
          width: 9px;
          height: 4px;
          background-color: @main-color;
          border-radius: 5px;
          rotate: 41deg;

        }
      }
    }
  }
  .notifications {
    position: relative;
    padding-left: 50px;
    height: @main-size - @header-size;
    padding-bottom: 10px;

    .line {
      position: absolute;
      left: 25px;
      bottom: 0;
      width: 4px;
      height: 100%;
      background-color: #ebebeb;
      border-radius: 5px;
    }
    .notification {
      @base-circle-pos: 13px;
      @circle-offset: (@main-size - @header-size) / 3 - 3px;

      // float: left;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 33%;
      margin-top: 1px;
      padding: 7px 6px 3px 0;
      
      &:first-child {
        margin-top: 0;
      }
      .mixin-font();

      .circle {
        @circle-size: 12px;
        top: @base-circle-pos;
        left: 21px;
        position: absolute;
        width: @circle-size;
        height: @circle-size;
        background-color: #fff;
        border: 2px solid #6098cd;
        border-radius: 50%;

      }

      &:nth-child(2) {

        .circle {
          top: calc(@circle-offset + @base-circle-pos);
        }
      }

      &:nth-child(3) {

        .circle {
          top: calc((@circle-offset * 2) + @base-circle-pos);
        }
      }

      .intros {
        margin-top: -9px;
      }

      &:hover {
        cursor: pointer;
        color: #5F98CD;
      }
    }

  }

  &.active {
    transform: translateX(35px);
  }
}

js

<script src="../../global_js/jQuery.3.7.0.js"></script>
  <script >
    $(function () {
      $('.tools').bind('click', function() {
        $('.sub-main').toggleClass('active')
        $('.main').toggleClass('active')
      })
    });
  </script>

效果图：

• opacity 和 display 的差异