css技巧系列之(五) 详情文字交互效果

效果图

实现源码： CSS部分

  .box {
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        width: 100px;
        height: 42px;
        line-height: 42px;
        position: relative;
        cursor: pointer;
      }
      .btn-bg {
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 15px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #97e138;
        transition: 0.24s;
      }
      .btn-span-text {
        width: 100%;
        text-align: center;
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #056c00;
        position: absolute;
      }
      .btn:hover .btn-bg {
        width: 100%;
        height: 42px;
        border-radius: 21px;
      }

HTML

 <div class="box">
      <div class="btn">
        <span class="btn-bg"></span>
        <span class="btn-span-text">查看详情</span>
      </div>
    </div>

css技巧效果到此结束，如果喜欢加个关注，可以在样式中寻找开发中的UI，可直接复制看效果。公众号地址