css实现虚线和点的平移动画

最新推荐文章于 2024-04-30 10:24:40 发布

无物勿吾

最新推荐文章于 2024-04-30 10:24:40 发布

阅读量517

点赞数 7

分类专栏： VUE 文章标签： css css3 前端

本文链接：https://blog.csdn.net/cmy120813/article/details/135017197

版权

VUE 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

HTML代码

   <div class="flow-view"> 
      <div class="top-left">
        <div class="line-view">
          <div class="line"></div>
          <div class="point"></div>
        </div>
     </div>
   </div>

css代码

.flow-view {
  position: relative;
  width: 100%;
  height: 30rem;
  background: #f9f9f9;
  .top-left {
    position: absolute;
    left: 12rem;
    top: 1rem;
    width: 27rem;
  }

  .line-view {
    position: absolute;
    top: calc(1.5rem - 15px);
    left: 0rem;
    width: 100%;
    height: 30px;
    overflow: hidden;
    .line {
      position: absolute;
      top: 14px;
      left: 0;
      width: 100%;
      height: 3px;
      overflow: hidden;
      background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 4px,
        #333 4px,
        #333 10px
      );
      animation: move-line infinite 50000s linear;
    }
    .point {
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #00fafa28;
      // box-shadow: 0px 0px 10px 3px #00fafa;
      // border: 10px solid #00fafaee;
      // box-sizing: content-box;
      animation: move-point infinite 5s linear;
    }
    .point::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 10px;
      width: 10px;
      height: 10px;
      opacity: 1;
      border-radius: 50%;
      background: #000;
    }
  }
  @keyframes move-line {
    from {
      background-position: 0px;
    }
    to {
      background-position: 100000vw;
    }
  }
  @keyframes move-point {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
  }
}