如何在没有svg的css动画中绘制移动对象的路径？答案

【问题标题】：how to draw a path of moving object in css animation without svg?如何在没有svg的css动画中绘制移动对象的路径？
【发布时间】：2022-01-16 22:47:42
【问题描述】：

我在 html 页面上有一个移动框（一个 div 变成了一个小框）。盒子在我在 css 动画帧中描述的曲线路径中移动。

现在我必须在这个盒子移动之后画一条线，只是为了模仿铅笔移动，所以看起来这条线已经被移动的盒子画了。当盒子移动时，一条线应该开始出现在它后面，例如就像我们用钢笔或铅笔画线一样。

不确定，如果仅在 css 中可行，但如果您有任何建议，请随时给我建议。谢谢。

这里是代码测试.html

        <html>
         <head>
           <link rel="stylesheet" href="box.css">
          </head>
          <body style="background-color: white;">      
             <div id="box">
               <div id="line"></div>
             </div>
         </body>
         <script src = "logo.js"></script>
       </html>

css 文件：box.css

body{
  width:100%;
  height:100vh;
  background-color: black;
}

#box {
  margin-top:300px;
  margin-left:30px;
  top:0;
  left:0;
  width:30px;
  height:40px;
  background-color: red;
  animation:move-line;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes move-line {
  0%{
    transform:translateX(0px)translateY(0px) ;
  }
  50%{
    transform:translateX(280px)translateY(0px) ;
  }
  60%{
    transform:translateX(300px)translateY(-100px) ;
  }
  70%{
    transform:translateX(300px)translateY(100px) ;
  }
  80%{
    transform:translateX(320px)translateY(0px) ;
  }
  90%{
    transform:translateX(330)translateY(0px) ;
  }
  100%{
    transform:translateX(400px) ;
  }

}

javascript 文件：logo.js 目前它是空的，但如果您有解决方案，也可以随意使用 javascript，但是首选 css。

【问题讨论】：

是的，你可以只使用 CSS。提前绘制路径（在容器上使用背景线性渐变），然后在带有白色背景的框上放置一个大的伪后元素。随着盒子的移动，线条会显露出来，而且时间会很准确。
如果你只是一点点codepen会很有帮助吗？

标签： css sass

【解决方案1】：

这里有一个 sn-p 来演示这个想法。

附加到红色框的 after 伪元素具有纯白色背景。

随着盒子的移动，伪元素“在它之前”显示下面已经存在的东西。

在此演示中，仅绘制了线条的第一部分。您需要添加其他带有额外线性渐变的线条，其中 3 条处于角度并适当定位，最后一条再次水平。

或者，您可以将图像放在那里而不是使用线性渐变，但我注意到您的问题说没有 SVG，所以我认为可能也不允许使用 jpg。

<style>
  body {
    width: 100%;
    height: 100vh;
    background-color: black;
  }
  
  .container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(transparent 0 calc(300px + 20px), black calc(300px + 20px) calc(301px + 20px), transparent calc(301px + 20px) 100%);
    background-size: 280px 100vh;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  
  #box {
    margin-left: 30px;
    top: 300px;
    left: 0;
    width: 30px;
    height: 40px;
    background-color: red;
    animation: move-line;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    position: relative;
  }
  
  #box::after {
    content: '';
    position: absolute;
    top: -300px;
    left: 100%;
    height: 100vh;
    width: 100vw;
    background-color: white;
    display: inline-block;
  }
  
  @keyframes move-line {
    0% {
      transform: translateX(0px)translateY(0px);
    }
    50% {
      transform: translateX(280px)translateY(0px);
    }
    60% {
      transform: translateX(300px)translateY(-100px);
    }
    70% {
      transform: translateX(300px)translateY(100px);
    }
    80% {
      transform: translateX(320px)translateY(0px);
    }
    90% {
      transform: translateX(330)translateY(0px);
    }
    100% {
      transform: translateX(400px);
    }
  }
</style>
<html>

<head>
  <link rel="stylesheet" href="box.css">
</head>

<body style="background-color: white;">
  <div class="container">
    <div id="box">
    </div>
  </div>
</body>
<script src="logo.js"></script>

</html>

【讨论】：

抱歉无法理解您要做什么？我有水平绘图的解决方案，它工作得很好，但在角度绘图时事情不适合，因为动画将绘制线推了几个像素.
运行 sn-p 时是否让它看起来好像盒子正在“画线”？如果你从一开始就有所有的线，只是在盒子移动之前被掩盖，那么时间或定位就不可能出错。您是否尝试过以度数斜率作为背景的一部分的线性渐变？