这是动态图! 就点击输入框线条做这样一个曲线运动! 怎么做没思路没代码望指教

用js配合css做出以下的效果!

LWXYFER

1.3k326

发布于
2017-09-21

首先需要一个 SVG ，然后使用 stroke-dasharray 来产生动画。

我写了个小栗子给你参考

当然用 canvas 也可以，不过直接这里的情况用 SVG 最简单了。

陌路凡歌

7.9k21119

发布于
2017-09-21

最好是用svg，当然css也能做，分成三部分，上部分横线，一个控制圆弧动画的loading，下部分横线，
圆形css做法如下，用js控制当横线走完了然后进行.left span的旋转，只把旋转的写出来了，具体的就不写了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圆环进度</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                text-align: center;
            }
              .loading{
                  margin: 10px auto;
                  width: 150px;
                  height: 150px;
                  position: relative;
                  background-color: #FFF;
              }
              .progress{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 120px;
                  height: 120px;
                  transform: translate(-50%,-50%);
                  color: red;
                  line-height: 120px;
                  text-align: center;
                  background-color: #FFF;
                  border-radius: 50%;
              }
              .left,.right{
                  float: left;
                  width: 50%;
                  height: 100%;
                  position: relative;
                  overflow: hidden;
              }
              .left span,.right span{
                  display: block;
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  background-color: red;
                  transition: all 0.4s;
              }
              .left span{                
                  border-radius:150px 0 0 150px;     
                  transform-origin: right;
                  transform: rotateZ(-180deg);                 
              }
              .right span{
                  border-radius:0 150px 150px 0;
                  transform-origin: left;
                  transform: rotateZ(-180deg);
                  animation: an 2s ease 0s infinite;
              }
              @keyframes an{
                  0%{
                      transform: rotateZ(-180deg);
                  }
                  50%{
                      transform: rotateZ(0deg);
                  }
                  100%{
                      transform: rotateZ(-180deg);
                  }
              }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="left"><span></span></div>
            <div class="right"><span></span></div>
              <div class="progress"></div>
        </div>        
    </body>
    <script>
        
    </script>
</html>