Сегодня мы с вами поработаем над другим интересным эффектом, который вы сразу же после прочтения сможете применять в своих проектах. Мы возьмем обычный div
и сделаем чтобы у него при наведении на него курсором мыши появлялись границы. Впрочем, стоп. Это слишком просто (верстка 2000 гг). Пусть границы будут с анимацией.
Конечно, вы можете создать этот эффект без SVG, даже без дополнительных элементов, только с помощью псевдо-элементов. Но здесь мы хотим показать, что мы можем сделать с помощью SVG и как мы можем управлять ею посредством CSS, а не с помощью JavaScript.
Как же это сделать? Можно анимировать свойство stroke-dashoffset
заливки прямоугольника, либо рисовать линии напрямую. Увы, CSS-переходы для свойств stroke-dashoffset
и stroke-dasharray
ведут себя по-разному в разных браузерах. Так что давайте попробуем другие решения, используя линии и анимируя их смещения. (Можно предложить другие методы решения этой задачи, но мне понравилась идея движущихся линий, потому что это довольно легко понять и сделать в CSS. Замечу, что это также дает нам еще некоторые возможности для различных анимаций, которые можете видеть на демо-примере)
Линий, представляющие собой границы нашего блока будут в три раза длиннее сторон этого блока, а в середине линии будет зазор размером со сторону блока. Мы добьемся этого, установив значение stroke-dashoffset равной стороне блока. А теперь небольшой фокус:
SVG будет размером с контейнер, так что мы не увидим части линий, выходящих за границы контейнера. До того, как продолжить работу над следующими тремя линиями, давайте закодируем этот первый этап. Итак, мы имеем div
со своей собственной SVG линией:
<div>
<svg width="200" height="200">
<line x1="0" y1="0" x2="600" y2="0" />
</svg>
</div>
Блок div
имеет ширину и высоту 200px. Для тега svg
будет задано абсолютное позиционирование. Линия имеет ширину обводки stroke-width 10 и, самое главное, значение прерывистости строки stroke-dasharray равно 200:
div {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
background: #ddd;
}
svg {
position: absolute;
top: 0;
left: 0;
}
svg line {
stroke-width: 10;
stroke: #000;
fill: none;
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
div:hover svg line {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
Для линии также задан переход, и при наведении на блок нам необходимо, чтобы линия сдвигалась на две трети своей длины влево, так что сместим ее на -400px по оси X. Так как мы не можем использовать процентные величины для смещений, необходимо задавать смещение в пикселах.
Следующим шагом является добавление других линий. Для того, чтобы понять, как мы должны позиционировать и анимировать их, давайте посмотрим на этот анимированный рисунок:
Нам нужно так анимировать каждую линию, чтобы когда первая часть линии уезжала из блока, в нем появлялась последняя часть связанной перпендикулярной линии. Это создаст иллюзию движения линий вокруг углов. Давайте попробуем определить координаты линии:
Координаты левой линии - (0,200) и (0, -400), для нижней - (200,200) и (-400,200), а для правой - (200,0) и (200 600):
<div>
<svg width="200" height="200">
<line class="top" x1="0" y1="0" x2="600" y2="0"/>
<line class="left" x1="0" y1="200" x2="0" y2="-400"/>
<line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
<line class="right" x1="200" y1="0" x2="200" y2="600"/>
</svg>
</div>
Для каждой строки, мы должны будем установить другое значение перемещения вдоль соответствующей оси при наведении:
div:hover svg line.top {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
div:hover svg line.bottom {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
div:hover svg line.left {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
div:hover svg line.right {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
Теперь мы правильно уловили основную мысль, нам нужен сам эффект. Теперь наш блок с классом box
будет другого размера (300 х 460), а также мы добавим текстовые элементы:
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0"/>
<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
</svg>
<img alt="CSS3" src="img/css3.png">
<h3>Дотронься</h3>
<h4>и потяни</h4>
</div>
Добавим самому блоку цветовой переход и небольшой зазор между рамкой SVG и элементом с помощью тени блока:
.box {
width: 300px;
height: 460px;
position: relative;
background: rgba(255,255,255,1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
color: #2c3e50;
box-shadow: inset 0 0 0 3px #2c3e50;
-webkit-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s;
}
.box:hover {
background: rgba(255,255,255,0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
Напишем стили для текстовых элементов:
.box h3 {
font: 400 180px/370px Arial;
margin: 0;
width: 100%;
}
.box span {
display: block;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;
padding: 5px;
}
.box h3,
.box h4 {
-webkit-transition: color 0.4s 0.5s;
transition: color 0.4s 0.5s;
}
.box:hover h3,
.box:hover h4 {
color: #fff;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
Стили SVG и линии будут такими же, как до этого:
.box svg {
position: absolute;
top: 0;
left: 0;
}
.box svg line {
stroke-width: 3;
stroke: #ecf0f1;
fill: none;
-webkit-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
Нам нужна небольшая задержка перед сдвигом линии, иначе при изменении цвета блока мы их не увидим:
.box:hover svg line {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
До этого мы задавали параметр stroke-dasharray одинаковым для всех линий, но теперь нам нужно, чтобы заполненные части линии и разрыв были разных размеров, чтобы наш эффект стал именно таким, как нам надо:
.box svg line.top,
.box svg line.bottom {
stroke-dasharray: 330 240;
}
.box svg line.left,
.box svg line.right {
stroke-dasharray: 490 400;
}
Если вы поиграете с этими значениями, вы сможете увидеть, что линии выглядят по-разному.
И, наконец, мы выставим соответствующие значения для смещений линий при наведении. Так как ширина нашего контейнера равняется 300px, горизонтальные линии должны быть смещены на две трети общей длины, которая составляет 900px. Тоесть величина смещения будет равна 600px. То же касается и вертикальных линий:
.box:hover svg line.top {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
.box:hover svg line.bottom {
-webkit-transform: translateX(600px);
transform: translateX(600px);
}
.box:hover svg line.left {
-webkit-transform: translateY(920px);
transform: translateY(920px);
}
.box:hover svg line.right {
-webkit-transform: translateY(-920px);
transform: translateY(-920px);
}
Вот и все! Я надеюсь, вам понравится этот небольшой эффект, и он придаст вам вдохновение. Посмотрите альтернативные варианты, которые можно сделать, пользуясь этой методикой.