SVG <clipPath> подходит для контейнера и использует% unit
Итак, я пытался создать волнующую анимацию для текста другого цвета, для этого я использую<clipPath>
а также-webkit-clip-path
,.holder
div содержит два элемента друг над другом с одинаковым текстом, один в белом, один в сером, иclip-path
применяется позже.
Проблема в том, что мне нужно<path>
координаты должны быть пропорциональны размеру текста. Вотдемонстрация скрипки.
Я пытался установитьviewBox="0 0 100 100"
не работает
Я также пытался использоватьclipPathUnits="objectBoundingBox"
но это не похоже на работу в этом случае, я думаю, потому что текстdisplay:inline
.
Теперь, если они кажутся слишком сложными для анализа, и вы понимаете основную концепцию и готовы сделать это по-своему, сделайте это, ятак открыт для предложений на данный момент.
Кроме того, я пытаюсь избежать JavaScript, чтобы сделать это, но если вам нужно, идти вперед, нет проблем :)
Вот необработанный код:
HTML<div class="container">
<div class="holder">
<div class="back">Text</div>
<div class="front">Text</div>
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<clipPath id="path">
<path fill="transparent" stroke="black" >
<animate
attributeName="d"
attributeType="XML"
values="M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z"
begin="0s"
dur="1s"
fill="freeze"
repeatCount="indefinite"
direction="alternate" />
</path>
</clipPath>
</svg>
</div>
</div>
<animate>
Элемент просто чередуется между двумя путями, чтобы создать эффект «волны».
.container {
display:inline-block;
padding:2.5% 5%;
background:lightcoral;
}
.holder {
position:relative;
text-align:center;
font:6em impact;
color:white;
text-transform:uppercase;
}
.front {
position:absolute;
top:0;
color:gray;
opacity:.3;
-webkit-clip-path:url(#path);
}
svg {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
Это мой css, не почти идеальный, не стесняйтесь разрывать его на части!
Заранее спасибо!