- Я хочу, чтобы сама линия была окрашена в золотой цвет с плавными случайными изменениями яркости (например, с помощью фильтра ), чтобы придать металлический вид.
- Я хочу, чтобы за линией был эффект свечения с такими же цветовыми вариациями, как у сама линия.
- Я хочу, чтобы линия стала прозрачной на крайнем левом и правом концах.
- Наконец, я хочу, чтобы непрозрачность линии была изменена чем-то вроде фильтра , который анимирован так, что части линии медленно, слегка исчезают и снова появляются в случайном порядке.
Код: Выделить всё
html {
background: black;
font-size: 16px;
margin: 0;
}
.first-heading {
margin: 0.9375rem 3.5rem;
font-family: serif;
font-weight: 400;
font-style: normal;
color: #bdbdbd;
}
.page-heading {
width: 100%;
display: inline-flex;
position: relative;
}
.page-heading::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-bottom: 0.125rem solid gold;
filter: drop-shadow(0 0 0.5rem gold) drop-shadow(0 0 0.5rem gold) url(#filter_gold);
mask: linear-gradient(0.25turn, black 0%, white 6.25%, white 93.75%, black 100%) luminance no-clip, url(#mask_fog) luminance no-clip repeat;
}Код: Выделить всё
Heading
Однако я не могу понять, как заставить Mask_fog работать над изменением прозрачности линии: если я сделаю это второй маской, она не будет иметь никакого эффекта, а если я сделаю ее первой маской, линия полностью исчезнет. Я также попробовал использовать только filter_fog в качестве маски, с теми же результатами.
Ниже приведен макет того, чего я хочу достичь, созданный с помощью After Effects (с использованием снимков экрана эффектов фильтра SVG из приведенного выше кода):
Подробнее здесь: https://stackoverflow.com/questions/798 ... d-css-mask
