这是动态图!
就点击输入框线条 做这样一个曲线运动!
怎么做 没思路 没代码 望指教
4 个回答
最好是用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动态变大变小边长变宽什么的，就写出来了。
这个效果在京东一些活动页经常出现，有心的话就打开控制台看一下就知道了。
你知道吗？
首先需要一个 SVG ，然后使用
stroke-dasharray来产生动画。我写了个小栗子给你参考
当然用 canvas 也可以，不过直接这里的情况用 SVG 最简单了。