SVG动画逐步
请从左到右帮助实施svg动画。随附的代码和gif。谢谢。
.ab-container {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
max-width: 400px;
height: 80px;
border: 1px solid black;
align-items: center;
padding: 20px;
}<div class="ab-container">
<div class="vfa-box1">
<img src="https://svgshare.com/i/CLH.svg" width="80" height="11">
<div class="vfa-subtitle-box">
<span class="vfa-bold">Security</span>
</div>
</div>
<div class="vfa-box2">
<img src="https://svgshare.com/i/CLH.svg" width="80" height="11">
<div class="vfa-subtitle-box">
<span class="vfa-bold">Sales always</span>
</div>
</div>
<div class="vfa-box3">
<img src="https://svgshare.com/i/CLH.svg" width="80" height="11">
<div class="vfa-subtitle-box">
<span class="vfa-bold">Best quality</span>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
这就是我要做的：
我将您的路径用作剪切路径：<clipPath id="clip">。我使用的是SVG元素，而不是图像，在其中我通过将stroke-dashoffset属性的值从80（总长度）更改为0来对线进行动画处理。每个动画在上一个动画结束时开始。
.ab-container {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
max-width: 400px;
height: 80px;
border: 1px solid black;
align-items: center;
padding: 20px;
}
line {
stroke: #ffd328;
clip-path: url(#clip);
stroke-width: 11;
stroke-dasharray: 80;
}<div class="ab-container">
<div class="vfa-box1">
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
<animate id="a"
attributeName="stroke-dashoffset"
from="80" to="0"
dur="1s"
fill="freeze"/>
</line>
</svg>
<div class="vfa-subtitle-box">
<span class="vfa-bold">Security</span>
</div>
</div>
<div class="vfa-box2">
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
<animate id="b"
attributeName="stroke-dashoffset"
from="80" to="0"
dur="1s"
begin="a.end"
fill="freeze"/>
</line>
</svg>
<div class="vfa-subtitle-box">
<span class="vfa-bold">Sales always</span>
</div>
</div>
<div class="vfa-box3">
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
<animate id="c"
attributeName="stroke-dashoffset"
from="80" to="0"
dur="1s"
begin="b.end"
fill="freeze"/>
</line>
</svg>
<div class="vfa-subtitle-box">
<span class="vfa-bold">Best quality</span>
</div>
</div>
</div>
<svg width="0" height="0" viewBox="34 60 80 11" >
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Fill 1</title>
<desc>Created with Sketch.</desc>
<clipPath id="clip">
<path id="stroke" d="M110.183516,61.6759399 C110.184437,61.6531135 110.185359,61.6302871 110.186281,61.6074607 C111.047584,61.5393327 111.908888,61.4715559 112.798303,61.4009696 C112.626411,60.5058235 112.012116,60.1592134 110.977076,60.1434105 C108.751235,60.1089954 106.525394,60.0180409 104.299553,60.0071545 C93.2417758,59.954127 102.271871,61.0666506 43.7004474,60.0071545 C41.475067,59.9667693 39.2492257,60.1089954 37.0229235,60.1434105 C35.9878843,60.1592134 35.373589,60.5058235 35.2016969,61.4009696 C36.0911117,61.4715559 36.9524155,61.5393327 37.8137193,61.6074607 C37.814641,61.6302871 37.8155627,61.6531135 37.8164843,61.6759399 C37.035827,61.706141 36.2514829,61.7096528 35.4754339,61.7718108 C34.3431581,61.8620629 33.8984507,62.5026068 34.0191899,63.7928251 C34.1039838,64.6988576 34.470349,64.9481922 35.6966355,64.9450316 C37.0095593,64.941871 38.3220222,64.9443292 39.6354068,64.9443292 C39.6464669,65.0233437 39.6584487,65.102007 39.6699696,65.1810214 C38.5713349,65.3200869 37.4625617,65.4222789 36.3795955,65.6112113 C35.6851146,65.7320156 34.6297985,65.5360598 34.7012282,66.537612 C34.7735796,67.55883 35.6989397,68.5161341 36.764855,68.5572216 C37.4312249,68.5828574 38.1008206,68.5621381 38.768573,68.5621381 C38.7953015,68.662223 38.8215692,68.7626592 38.8482977,68.8630954 C38.2234032,69.1299887 37.5985086,69.3972331 36.8270679,69.7269868 C38.0980556,70.6182699 39.4911649,70.8897285 40.9538606,70.8647951 C94.5233627,69.9394479 77.945223,71.1046478 93.8003099,70.9922717 C98.2155864,70.9610171 102.630863,70.9216855 107.045679,70.8647951 C108.509296,70.8454804 109.902405,70.6182699 111.172932,69.7269868 C110.401491,69.3972331 109.776597,69.1299887 109.152163,68.8630954 C109.17797,68.7626592 109.204698,68.662223 109.231427,68.5621381 C109.899179,68.5621381 110.568775,68.5828574 111.234684,68.5572216 C112.301521,68.5161341 113.22596,67.55883 113.299233,66.537612 C113.370201,65.5360598 112.314885,65.7320156 111.620865,65.6112113 C110.537438,65.4222789 109.428204,65.3200869 108.33003,65.1810214 C108.342012,65.102007 108.353072,65.0233437 108.365054,64.9443292 C109.677517,64.9443292 110.990902,64.941871 112.303825,64.9450316 C113.529651,64.9481922 113.896477,64.6988576 113.98081,63.7928251 C114.101549,62.5026068 113.656842,61.8620629 112.524566,61.7718108 C111.748517,61.7096528 110.964173,61.706141 110.183516,61.6759399 Z" id="Fill-1"></path>
</clipPath>
</svg>
这就是我使用CSS动画的方式。逻辑与以前相同。我正在使用路径来剪裁线条，并且将笔划的偏移量从80设置为动画。
.ab-container {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
max-width: 400px;
height: 80px;
border: 1px solid black;
align-items: center;
padding: 20px;
}
line {
stroke: #ffd328;
clip-path: url(#clip);
stroke-width: 11;
stroke-dasharray:80;
stroke-dashoffset:80;
animation:dash .5s forwards;
}
.vfa-box2 line{
animation-delay:.5s
}
.vfa-box3 line{
animation-delay:1s
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}<div class="ab-container">
<div class="vfa-box1">
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
</line>
</svg>
<div class="vfa-subtitle-box">
<span class="vfa-bold">Security</span>
</div>
</div>
<div class="vfa-box2">
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
</line>
</svg>
<div class="vfa-subtitle-box">
<span class="vfa-bold">Sales always</span>
</div>
</div>
<div class="vfa-box3">
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
</line>
</svg>
<div class="vfa-subtitle-box">
<span class="vfa-bold">Best quality</span>
</div>
</div>
</div>
<svg width="80px" height="11px" viewBox="34 60 80 11" >
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Fill 1</title>
<desc>Created with Sketch.</desc>
<clipPath id="clip">
<path id="stroke" d="M110.183516,61.6759399 C110.184437,61.6531135 110.185359,61.6302871 110.186281,61.6074607 C111.047584,61.5393327 111.908888,61.4715559 112.798303,61.4009696 C112.626411,60.5058235 112.012116,60.1592134 110.977076,60.1434105 C108.751235,60.1089954 106.525394,60.0180409 104.299553,60.0071545 C93.2417758,59.954127 102.271871,61.0666506 43.7004474,60.0071545 C41.475067,59.9667693 39.2492257,60.1089954 37.0229235,60.1434105 C35.9878843,60.1592134 35.373589,60.5058235 35.2016969,61.4009696 C36.0911117,61.4715559 36.9524155,61.5393327 37.8137193,61.6074607 C37.814641,61.6302871 37.8155627,61.6531135 37.8164843,61.6759399 C37.035827,61.706141 36.2514829,61.7096528 35.4754339,61.7718108 C34.3431581,61.8620629 33.8984507,62.5026068 34.0191899,63.7928251 C34.1039838,64.6988576 34.470349,64.9481922 35.6966355,64.9450316 C37.0095593,64.941871 38.3220222,64.9443292 39.6354068,64.9443292 C39.6464669,65.0233437 39.6584487,65.102007 39.6699696,65.1810214 C38.5713349,65.3200869 37.4625617,65.4222789 36.3795955,65.6112113 C35.6851146,65.7320156 34.6297985,65.5360598 34.7012282,66.537612 C34.7735796,67.55883 35.6989397,68.5161341 36.764855,68.5572216 C37.4312249,68.5828574 38.1008206,68.5621381 38.768573,68.5621381 C38.7953015,68.662223 38.8215692,68.7626592 38.8482977,68.8630954 C38.2234032,69.1299887 37.5985086,69.3972331 36.8270679,69.7269868 C38.0980556,70.6182699 39.4911649,70.8897285 40.9538606,70.8647951 C94.5233627,69.9394479 77.945223,71.1046478 93.8003099,70.9922717 C98.2155864,70.9610171 102.630863,70.9216855 107.045679,70.8647951 C108.509296,70.8454804 109.902405,70.6182699 111.172932,69.7269868 C110.401491,69.3972331 109.776597,69.1299887 109.152163,68.8630954 C109.17797,68.7626592 109.204698,68.662223 109.231427,68.5621381 C109.899179,68.5621381 110.568775,68.5828574 111.234684,68.5572216 C112.301521,68.5161341 113.22596,67.55883 113.299233,66.537612 C113.370201,65.5360598 112.314885,65.7320156 111.620865,65.6112113 C110.537438,65.4222789 109.428204,65.3200869 108.33003,65.1810214 C108.342012,65.102007 108.353072,65.0233437 108.365054,64.9443292 C109.677517,64.9443292 110.990902,64.941871 112.303825,64.9450316 C113.529651,64.9481922 113.896477,64.6988576 113.98081,63.7928251 C114.101549,62.5026068 113.656842,61.8620629 112.524566,61.7718108 C111.748517,61.7096528 110.964173,61.706141 110.183516,61.6759399 Z" id="Fill-1"></path>
</clipPath>
</svg>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？