小编Ali*_*ooq的帖子
如何为 SVG <animateMotion> 添加缓出效果
我正在 SMIL 的帮助下为 SVG 设置动画。除了我想向 animatemotion 标签添加“缓出”效果之外，所有在 chrome 中都按预期工作。现在平面以线性方式沿着路径移动。我想要的是动画在最后有一个缓慢的停止，就像 CSS3 缓出效果一样。
这是SVG代码。
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px"
viewBox="0 0 500 700">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<animateMotion
id="1"
xlink:href="#plane"
dur="2s"
path="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31"
fill="freeze"
/>
<g>
<path d="M113.2,586.8c-2.3-1.3-4.8-0.5-6.5,1.9c-0.9,1.4-2,2.7-2.8,4.1c-0.1,0.2-0.2,0.3-0.3,0.4c-0.2,0.5-0.5,1-0.8,1.4
c3.9,0,7.8,0,11.7,0c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0.1,0,0.1,0c0.1-0.3,0.2-0.6,0.3-0.8C116.3,590.6,115.5,588.1,113.2,586.8z"/>
<g id="plane" transform="scale(0.5) translate(-263.9, -167.6)">
<g>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 343.9 167.6"
to="-360 343.9 167.6"
dur="2s"
calcMode="spline"
keySplines="0.6 0.3 0.4 0.335"
keyTimes="0;1"
/>
<path d="M263.9,167.6c7.6-1,14.9-2,22.3-2.8c2.3-0.2,3.6-1.2,4.8-3.1c2.6-4.3,5.5-8.4,8.2-12.6c1.8-2.8,4.5-4,6.8-3.2 …7
推荐指数
推荐指数
1
解决办法
解决办法
1384
查看次数
查看次数
CSS中的砖块布局
我一直在尝试创建一个砖布局,就像CSS中的附加图像一样,没有任何成功.请参阅附图
为了实现这种布局,我编写了一些代码.我试图使用以下HTML复制第一行(带有"Let's"一词的行)
<div class="photo-row first">
<div class="first-item-1"></div>
<div class="first-item-2"></div>
<div class="first-item-3"></div>
<div class="first-item-4"></div>
<div class="first-item-5"></div>
</div>
和CSS
.photo-row {
width: 100%;
height: 200px;
}
.photo-row.first div {
display: inline-block;
height: 100%;
}
.first-item-1 {
width: 13.57%;
background: red;
}
.first-item-2 {
width: 19.21%;
background: green;
}
.first-item-3 {
width: 31.21%;
background: orange;
}
.first-item-4 {
width: 15.14%;
background: blue;
}
.first-item-5 {
width: 19.78%;
background: yellow;
}
我们的想法是为每个div提供父div的固定百分比宽度,这样它们就会以砖块格式对齐并具有响应性.然后我打算给每个孩子们一个背景图像.我的布局有效但在某些视图端口它会断开,最后一个子div转移到第二行.
我还做了一个codepen演示来演示这个:https://codepen.io/Ali_Farooq_/pen/oobBYj
.photo-row {
width: 100%;
height: 200px;
}
.photo-row.first div …4
推荐指数
推荐指数
1
解决办法
解决办法
1238
查看次数
查看次数