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

小浩子
  • 126

图片描述

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

回复
阅读 2k
4 个回答

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

我写了个小栗子给你参考

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

最好是用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>

在password底下放一个形状一模一样的div,然后比password框大一个border的宽度,颜色调成那个动态效果的颜色,然后每次切换的时候把只露出来一点的那个div动态变大变小边长变宽什么的,就写出来了。

这个效果在京东一些活动页经常出现,有心的话就打开控制台看一下就知道了。

你知道吗?

宣传栏