• 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>

    示例如下：

    测试测试

    测试测试

    测试测试

    测试测试
  • 相关阅读:
    Java集合概述
    Java8内存结构—永久代(PermGen)和元空间(Metaspace)
    ArrayList分析
    “三次握手，四次挥手”你真的懂吗？
    Object中的方法以及对象相等的判定
    笔记
    Mybatis中的@Param注解
    react与jQuery对比,有空的时候再翻译一下
    队列理论和队列网络模型 queueing theory and queueing network model
    下拉列表autocomplete各种实现方式比较
  • 原文地址：https://www.cnblogs.com/zwhbk/p/13644327.html
Copyright © 2020-2023  润新知