#javascript #css #html5 #svg #css_animation
Необходимо реализовать анимацию обводки контуров кнопки.
Анимационные линии должны идти из одной точки в разных направлениях и встречаться
одновременно друг с другом в другой точке.
Анимация начинается из средней точки нижнего бордюра кнопки
Промежуточный этап
Промежуточный этап
Финальное положение - линии смыкаются в одной точке
Пробовал использовать технику рисования линий с помощью изменения атрибутов stroke-dasharray
и stroke-dashoffset
Анимация начинается после наведения курсора
body {
max-width: 100vh;
margin: 0;
color: #fff;
font-size: 24px;
background: #3A92CE;
}
a, a:hover, a:focus, a:active, a:visited {
color: gold;
text-decoration: none;
font-size: 1em;
}
.hero {
height: 100vh;
width: 100vw;
}
.svg-container {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
max-height: 60px;
cursor: pointer;
}
.rect-shape {
stroke:#E4E4E4;
stroke-width:2;
fill:transparent;
}
.text {
font-family: serif;
font-size: 26px;
font-weight:bold;
line-height: 32px;
letter-spacing: 4px;
color: #E4E4E4;
top: -48px;
position: relative;
text-align: center;
}
Анимация рисования бордюра получилась из одной точки, но только одной линией
Как сделать анимацию с помощью двух линий, как показано на картинках выше.
Ответы
Ответ 1
Для реализации идеи одновременной анимации рисования с помощью двух линий, можно использовать атрибут stroke-dasharray. У атрибута stroke-dasharray имеется несколько пар параметров: stroke-dasharray = "черта пробел черта пробел" Остается вычислить необходимые значения этих параметров: Длина периметра кнопки: 320 + 60 + 320 + 60 = 760 Половина длины периметра, - это будет длина одной линии - 380px Чтобы скрыть линии на начальном этапе рисования записываем stroke-dasharray ="0 380 0 380" Другими словами - черта - 0, пробел - 380, черта - 0, пробел - 380 Итого: длина черты - 0, длина пробела - 760 то есть линия будет полностью скрыта Чтобы полностью показать обе сомкнутые линии: stroke-dasharray ="0 0 760 0" Записываем формулу анимации: values="0 380 0 380; 0 0 760 0" body { max-width: 100vh; margin: 0; color: #fff; font-size: 24px; background: #3A92CE; } a, a:hover, a:focus, a:active, a:visited { color: gold; text-decoration: none; font-size: 1em; } .hero { height: 100vh; width: 100vw; } .svg-container { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px; max-height: 60px; cursor: pointer; } .rect-shape { stroke:#E4E4E4; stroke-width:2; fill:transparent; } .text { font-family: serif; font-size: 26px; font-weight:bold; line-height: 32px; letter-spacing: 4px; color: #E4E4E4; top: -48px; position: relative; text-align: center; }Чтобы начать анимацию из другой точки, например из середины верхней линии кнопки, нужно сдвинуть начальную точку анимации с помощью команды stroke-dashoffset="220" Top-middle body { max-width: 100vh; margin: 0; color: #fff; font-size: 24px; background: #4A4A4A; } a, a:hover, a:focus, a:active, a:visited { color: gold; text-decoration: none; font-size: 1em; } .hero { height: 100vh; width: 100vw; } .svg-container { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; width: 320px; max-height: 60px; cursor: pointer; } .rect-shape { stroke:#E4E4E4; stroke-width:2; fill:transparent; } .text { font-family: serif; font-size: 26px; font-weight:bold; line-height: 32px; letter-spacing: 4px; color: #E4E4E4; top: -48px; position: relative; text-align: center; } Top middle
Комментариев нет:
Отправить комментарий