Как отобразить картинку, чтобы она не выглядела связанной - PullRequest
0 голосов
/ 10 февраля 2020

У меня есть изображение волны, и я хочу сделать его анимированным.
Как мне удалить стежки, соединяющие изображения?

это то, что я сделал на данный момент:

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.
Ваше решение было отличным !!!
Если есть способ пометить ваш ответ как наиболее рекомендуемый, я сделаю это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...