CSS анимированная волнистая линия не отображается должным образом в Chrome - PullRequest
Новая
       56

CSS анимированная волнистая линия не отображается должным образом в Chrome

3 голосов
/ 24 октября 2019

Я создал простую анимированную волнистую линию для использования в качестве разделителя на одном из моих веб-сайтов. В сафари выглядит идеально, но в Chrome выглядит странно.

Вот скриншот сафари: enter image description here

Вот скриншот Chrome: enter image description here

Сафари идеально подходит для меня, но кажется, что хром не нравится.

Я пытался добавить ВСЕ префиксы поставщиков в начало селекторов и различных мест, но я не могу решить эту проблему.

Может кто-нибудь сказать, пожалуйста, где я иду не так?

Вот CODEPEN и вот фрагмент кода: 

.wavy-line {
  width: 150px;
  height: 50px;
  overflow: hidden;
  margin: 0 auto 0 auto;
}
.wavy-line:before {
  content: attr(data-text);
  position: relative;
  top: -35px;
  color: rgba(0,0,0,0);
  width: calc(100% + 27px);
  font-size: 4em;
  text-decoration-style: wavy;
  text-decoration-color: #25173A;
  text-decoration-line: underline;
  animation: animate .9s linear infinite;
  -webkit-animation: animate .9s linear infinite;
}

@keyframes animate {
  0% { left: -0px; }
  100% { left: -30px;}
}
@-webkit-keyframes animate {
  0% { left: -0px; }
  100% { left: -30px;}
}

.wavy-line-green:before { text-decoration-color: #56AE5F; }
.wavy-line-blue:before { text-decoration-color: #1FB5D1; }
.wavy-line-yellow:before { text-decoration-color: #F9B930; }
<div class="wavy-line wavy-line-green" data-text="xxxxxxxxxxxxxx"></div>

<div class="wavy-line wavy-line-blue" data-text="xxxxxxxxxxxxxx"></div>

<div class="wavy-line wavy-line-yellow" data-text="xxxxxxxxxxxxxx"></div>

1 Ответ

2 голосов
/ 26 октября 2019

Я рассмотрю предыдущий ответ , чтобы нарисовать волны с помощью CSS, а затем вы можете легко анимировать их. Вам просто нужно настроить переменную CSS для управления формой: 

.wave {
  --c:red;   /* Color */
  --t:5px;   /* Thickness */
  --h:50px;  /* Height  */
  --w:120px; /* Width  */
  --p:13px;  /* adjust this to correct the position when changing the other values*/
  
  margin:5px auto;
  width:calc(var(--w)*4);
  height:calc(var(--h) + 10px);
  overflow:hidden;
  position:relative;
}
.wave:before {
  content:"";
  position:absolute;
  padding:5px 0;
  top:0;
  left:0;
  width:200%;
  bottom:0;
  
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
    
  background-size:var(--w) var(--h);
  background-position:calc(var(--w)/2) calc(-1*(var(--h)/2)),0px calc(var(--h)/2);
  background-repeat:repeat-x;
  background-origin:content-box;
  
  animation:move 3s infinite linear;
}

@keyframes move {
  to {
   transform:translateX(-50%);
  }
}
<div class="wave"></div>

<div class="wave" style="--w:140px;--h:40px;--p:13px; --t:8px;--c:purple"></div>


<div class="wave" style="--w:100px;--h:30px;--p:14px;--t:10px;--c:green;"></div>

<div class="wave" style="--w: 64px;--h: 22px;--p: 11px;--t: 7px;--c: orange;"></div>
...