Как создать эффект волны заливки текста?

Я хочу использовать чистый css для реализации эффекта волновой анимации в тексте, высоту волны можно контролировать, а изображение волны не используется.

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
span {
    font-size: 10em;
    -webkit-text-fill-color: rgba(0, 0, 0, .1);
    position: relative;
}
span::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
    background-color: blueviolet;
    z-index: -1
}
span::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
    background-color: lightpink;
    z-index: -2;
    top: 100px;
}

<span>FILL</span>

Я не пытаюсь ответить на вопрос здесь, я надеюсь, что это сделает кто-то с лучшими знаниями. но до тех пор могу предложить вам проверить это stackoverflow.com/questions/17202548/wavy-shape-with-css и попробовать анимировать и замаскировать его.

— 18.12.2020 18:04

Посмотрите на bakground-clip и анимированные фоновые градиенты.

— 18.12.2020 18:04

css css-animations

18.12.2020 17:56

5 способов использования оповещений, предупреждений, ошибок, сообщений об успехе в Bootstrap

Bootstrap - это популярный front-end фреймворк, который делает веб-разработку проще и быстрее. Использование Bootstrap растет по мере того, как все...

Как сделать меню гамбургера только на CSS

Недавно я делал небольшие изменения на своем сайте , когда я вновь обнаружил меню гамбургера, которое я сделал для него. В нем нет ничего особенного,...

Полеты по миру фронтенда, том 9

Мир фронтенда снова растет быстрее, чем население Земли. За всеми новостями и тенденциями в нем становится почти так же трудно уследить, как за...

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Библиотека Bootstrap

Bootstrap - это бесплатный набор инструментов для разработки веб-приложений с открытым исходным кодом, разработанный компанией Twitter. Написанный на...

Уроки CSS 28

Здравствуйте, дорогие читатели, я Ферди Сефа Дюзгюн, сегодня мы продолжим с вами уроки css.

763

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала я начну с создания волновой анимации с использованием фона, как показано ниже:

.box {
  background:
    radial-gradient(100% 58% at top   ,red   99%,green) calc(0*100%/3) 0,
    radial-gradient(100% 58% at bottom,green 99%,red  ) calc(3*100%/3) 0,
    radial-gradient(100% 58% at top   ,red   99%,green) calc(6*100%/3) 0,
    radial-gradient(100% 58% at bottom,green 99%,red  ) calc(9*100%/3) 0;
  background-size:50% 100%;
  background-repeat:no-repeat;
  height:200px;
  width:300px;
  animation: move 1s infinite linear;
}

@keyframes move {
  to {
    background-position:
       calc(-6*100%/3) 0,
       calc(-3*100%/3) 0,
       calc(0*100%/3) 0,
       calc(3*100%/3) 0;
  }
}

<div class = "box"></div>

Затем я добавлю текст и раскрашу его этим фоном:

.box {
  background:
    radial-gradient(100% 58% at top   ,red   99%,green) calc(0*100%/3) 0,
    radial-gradient(100% 58% at bottom,green 99%,red  ) calc(3*100%/3) 0,
    radial-gradient(100% 58% at top   ,red   99%,green) calc(6*100%/3) 0,
    radial-gradient(100% 58% at bottom,green 99%,red  ) calc(9*100%/3) 0;
  background-size:50% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  color:transparent;
  background-clip:text;
  display:inline-block;
  padding:20px;
  font-size:100px;
  font-family:arial;
  font-weight:bold;
  animation: move 1s infinite linear;
}

@keyframes move {
  to {
    background-position:
       calc(-6*100%/3) 0,
       calc(-3*100%/3) 0,
       calc(0*100%/3) 0,
       calc(3*100%/3) 0;
  }
}

<div class = "box"> FILL</div>

Связанный вопрос, чтобы понять логику фоновых значений: Использование процентных значений с фоновым положением на линейном градиенте

Чтобы контролировать высоту волны, мы настраиваем background-size:

.box {
  background:
    radial-gradient(100% 58% at top   ,red   99%,green) calc(0*100%/3) 0,
    radial-gradient(100% 58% at bottom,green 99%,red  ) calc(3*100%/3) 0,
    radial-gradient(100% 58% at top   ,red   99%,green) calc(6*100%/3) 0,
    radial-gradient(100% 58% at bottom,green 99%,red  ) calc(9*100%/3) 0
    green;
  background-size:50% 200%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  color:transparent;
  background-clip:text;
  display:inline-block;
  padding:20px;
  font-size:100px;
  font-family:arial;
  font-weight:bold;
  animation:
    move 1s infinite linear,
    up   5s infinite linear alternate;
}

@keyframes move {
  to {
    background-position:
       calc(-6*100%/3) 0,
       calc(-3*100%/3) 0,
       calc(0*100%/3) 0,
       calc(3*100%/3) 0;
  }
}

@keyframes up {
  to {
    background-size:50% 20%;
  }
}

<div class = "box"> FILL</div>

Также как ниже:

.box {
  background:
    radial-gradient(100% 58% at top   ,transparent   99%,green) calc(0*100%/3) 0/50.1% 180%,
    radial-gradient(100% 58% at bottom,green 99%,transparent  ) calc(3*100%/3) 0/50.1% 180%,
    radial-gradient(100% 58% at top   ,transparent   99%,green) calc(6*100%/3) 0/50.1% 180%,
    radial-gradient(100% 58% at bottom,green 99%,transparent  ) calc(9*100%/3) 0/50.1% 180%,
    linear-gradient(green,green) bottom/100% 0%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  padding:20px;
  font-size:100px;
  font-family:arial;
  font-weight:bold;
  animation:
    move 1s infinite linear,
    up   5s infinite linear alternate;
}

@keyframes move {
  to {
    background-position:
       calc(-6*100%/3) 0,
       calc(-3*100%/3) 0,
       calc(0*100%/3)  0,
       calc(3*100%/3)  0,
       bottom;
  }
}

@keyframes up {
  to {
    background-size: 
      50.1% 20%,
      50.1% 20%,
      50.1% 20%,
      50.1% 20%,
      100%  80%;
  }
}

body {
 background:#f2f2f2;
}