RuCoder

RuCoder

1Мы создаём текст. Настраиваем стиль текста так, как нам нравится.

2. Дублируем копию нашего созданного текста.

3. Задаём  стиль css нашему первому тексту. Цвет можем указать любой, я же указал красный.
				
					selector{
 -webkit-text-stroke: 2px #03a9f4;
}
				
			
4. Делаем прозрачный цвет нашего первого текста.
5. Задаём  стиль css нашему второму тексту.
				
					selector{
 -webkit-animation: water 4s ease-in-out infinite;
 animation: water 4s ease-in-out infinite;
}
@-webkit-keyframes water{
    0%, 100%{
        -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
    }
    50%{
        -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
    }
}
@keyframes water{
    0%, 100%{
        -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
    }
    50%{
        -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
    }
}
				
			
6. Задаём «АБСОЛЮТНОЕ»  Позиционирование первому тексту. ( А также делаем выравнивание как нам подходит.

Отлично, хорошо. Радуемся нашему текстовому эффекту волны.