我试图让一艘帆船从左到右水平移动,然后翻转船并从右到左动画回来,然后循环。
我有权继续离开。不知道如何处理翻盖和从右到左的部分。
.sailBoatContainer {
position: absolute;
width: 250px;
animation: move 20s linear infinite;
}
@keyframes move {
from {
left: 0;
}
to {
left: 100%;
}
}
<div id="sail" class="sailBoatContainer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 103.18">
<defs>
<style>.sail1,.sail5{fill:none;}.sail1{stroke:#e1e1e1;}.sail1,.sail5,.sail6{stroke-linecap:round;}.sail1,.sail6{stroke-linejoin:round;}.sail2,.sail6{fill:#d3dfdd;}.sail3{fill:#f4f4f4;}.sail4{fill:#f1263a;}.sail5{stroke:#ae8863;stroke-miterlimit:10;stroke-width:2px;}.sail6{stroke:#c2ccca;}.sail7{fill:#7f604c;}
</style>
</defs>
<title>sailboat</title>
<g id="rigging">
<path id="roperight" class="sail1" d="M1.48,89s37-35.67,50-70.33" transform="translate(-0.48 0)"/>
<path id="ropeleft" class="sail1" d="M51.48,20.33c16,37.34,46,62.67,46,62.67" transform="translate(-0.48 0)"/>
</g>
<g id="cabin">
<path id="cabinbox" class="sail2" d="M51.48,82v8h27V87s-9-5-12-5ZM62,83.5h4v4H62Zm-6,1h3v3H56Z" transform="translate(-0.48 0)"/>
</g>
<g id="sails">
<path id="sailright" class="sail3" d="M86.48,72s-23-43-33-49c0-1,11,24-4,46C49.48,69,75.48,68,86.48,72Z" transform="translate(-0.48 0)"/>
<path id="sailleft" class="sail3" d="M48.48,14s-49,35-34,66c0,1,35,0,35,0S44.48,38,48.48,14Z" transform="translate(-0.48 0)"/>
</g>
<g id="flag">
<path class="sail4" d="M52,1.5s-2,2-3,2-8-2-11,0c0,0,6,1,8,4h6Z" transform="translate(-0.48 0)"/>
</g>
<g id="mast">
<line id="mastline" class="sail5" x1="51" y1="88" x2="51" y2="1"/>
</g>
<g id="hull">
<path id="hullbox" class="sail6" d="M90,101.5s-78,4-89-4v-9s79,2,97-6C97,83.5,99,90.5,90,101.5Z" transform="translate(-0.48 0)"/>
</g>
<g id="hullbottom">
<path id="hullbottombox" class="sail7" d="M91.87,99.88S21.5,104,.5,97v2s8.73,6.94,89.73,2.94Z" transform="translate(-0.48 0)"/>
</g>
</svg>
</div>
这是Codpen
如果有人能指出我正确的方向,我会很感激。
答案 0 :(得分:2)
你可以在动画中使用这样的关键帧
onListenerConnected()
答案 1 :(得分:2)
不确定如何处理翻页和从右到左的部分。
首先从两个转到三个&#34;步骤&#34;,0%/ 50%/ 100%而不是从/到。一直向右移动50%,然后以100%回到0。
(left: calc(100% - 250px);
有助于它在到达正确的窗口边缘时转身,而不是超过船的宽度并导致滚动条; - )
然后将一些transform:scaleX
投入&#34;镜像&#34;它也是50%。
但实际上这需要插入第四步 - 否则scaleX将慢慢地将从-1转换为1,并且他的船将结束&#34;旋转&#34; ...所以要保持在-1,直到我们达到50%,投入一个49.999%的框架:
@keyframes move
{
0% {
left: 0;
transform: scaleX(1);
}
49.999% {
transform: scaleX(1);
}
50% {
left: calc(100% - 250px);
transform: scaleX(-1);
}
100% {
left: 0%;
transform: scaleX(-1);
}
}