css 实现虚线滚动 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      float: left;
      margin-left: 20px;
    }
    .box1 {
      position: relative;
      background: url(https://www.zhangxinxu.com/study/image/selection.gif);
    }
    .box1>p {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: calc(100% - 2px);
      width: calc(100% - 2px);
      background-color: #fff;
    }

    .box2 {
      background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 4px,
        #000 4px,
        #000 8px
      );
      overflow: hidden;
      animation: move 1s infinite linear;
    }
    .box2>p {
      height: calc(100% - 2px);
      margin: 1px;
      background-color: #fff;
    }

    @keyframes move {
      from {
        background-position: -1px;
      }
      to {
        background-position: -12px;
      }
    }

    .box3 {
      background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
        linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
        linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
        linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
      background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
      background-position: 0 0, 100% 0, 0 0, 0 100%;
      animation: move2 1s infinite linear;
    }
    .box3>p {
      margin: 1px;
    }

    @keyframes move2 {
      from {
      }
      to {
        background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
      }
    }

    .box4 {
      background: linear-gradient(0deg, #f0e, #fe0);
      -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
        linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
        linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
        linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
        linear-gradient(0deg, #fff, #fff) no-repeat;
      -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
      -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
      overflow: hidden;
      animation: move3 1s infinite linear;
    }
    .box4>p {
      height: calc(100% - 2px);
      margin: 1px;
      background-color: #fff;
    }

    @keyframes move3 {
      from {
      }
      to {
        -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
      }
    }
  </style>
</head>
<body>
  <div class="box box1">
    <p>测试测试</p>
  </div>
  <div class="box box2">
    <p>测试测试</p>
  </div>
  <div class="box box3">
    <p>测试测试</p>
  </div>
  <div class="box box4">
    <p>测试测试</p>
  </div>
</body>
</html>

示例如下：

测试测试

测试测试

测试测试

测试测试

posted @ 2020-09-10 10:33  五环  阅读(1139)  评论(0)  编辑  收藏  举报