我看到了
this SVG animation,我想知道如何改变线路被擦除的方向;当前线从它绘制的最后一点缩回,但是我想要反过来;从第一次开始绘制的点开始擦除自己的行(这样看起来更像是一个加载动画).
我看到.path上的动画属性值为无穷大,但我不确定如何指定方向.
HTML是
<div class="bg"> <svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236"> <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/> <path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/> </svg> </div>
CSS就是
body { background-color: #fff; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .path { animation: draw 3.5s infinite; } @keyframes draw { 50% { stroke-dashoffset: 0; } }
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。