У меня есть изображение волны, и я хочу сделать его анимированным.
Как мне удалить стежки, соединяющие изображения?
это то, что я сделал на данный момент:
HTML
<div class="container">
<div class="wave"></div>
</div>
CSS (S CSS)
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1503455637927-730bce8583c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80");
background-size: cover;
background-attachment: fixed;
.wave {
position: absolute;
width: 100%;
height: 134px;
bottom: 0;
left: 0;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/938837/wave.svg");
animation: wave 10s linear infinite;
&::before {
content: '';
position: absolute;
width: 100%;
height: 134px;
}
}
}
@keyframes wave {
0% {
background-position: 0;
}
100% {
background-position: 760px;
}
}
SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg width="999px" height="134px" viewBox="0 0 999 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wave" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,134 L0,42.2253747 C17.4511761,28.1474908 42.9411378,28.9929687 61.2033313,42.0015294 L167.733031,117.88497 C181.802595,127.907028 200.048695,129.956904 215.991332,123.306596 L349.698927,67.5318352 C362.723379,62.0988175 377.437251,62.422763 390.209969,68.4237399 L500.138179,120.071059 C518.142964,128.530206 539.449556,125.511425 554.395844,112.383672 L667.77663,12.7980841 C686.560807,-3.700595 714.644244,-3.7888782 733.531778,12.5913759 L843.37411,107.85237 C861.00964,123.146821 886.88145,124.202875 905.704833,110.396629 L998.649267,42.2253747 L998.649267,134 L0,134 Z" id="Line"></path>
</g>
</g>
</svg>
Код на JSFiddle
Ответ Спасибо @ksav за рекомендацию округлить значения ребер
(от L998.649267 до L999 ) в моем файле SVG.
Ваше решение было отличным !!!
Если есть способ пометить ваш ответ как наиболее рекомендуемый, я сделаю это.